尝试操作 dom 时 Jquery 返回 [object object]

Question

我正在尝试将 html 片段（输入元素）动态插入到已经存在的 div 节点中。

我需要创建三个输入元素，所以我使用循环来创建它们并通过 jquery 初始化它们。我将创建的元素存储在一个名为 htmlstr 的变量中。

 var Buildstorecontents = function Buildstorecontents ()
    {

      var $parts_holder = $("#parts_holder");
      var $htmlstr = "";
      for(var i = 0; i < 3; i += 1)
      {
        $htmlstr += $("<input />", {
          "type"  : "text",
          "class" : "",
          "readonly"  : true
         }).append($("<br />"));
      }
      console.log($htmlstr);
      $parts_holder.append($htmlstr);
     }
     Buildstorecontents();

问题是变量 htmlstr 不是保存创建的 html 节点，而是保存 [object object]。我犯了什么错误以及其他可能的方法？

这就是我想要达到的目标

<div id="parts_holder">        
  <input type="text" class="" readonly/><br /> 
  <input type="text" class="" readonly/><br />
  <input type="text" class="" readonly/><br />
</div>    

Answer 1

你的错误是期望 jQuery 操作的结果是一个字符串。

您应该在将其传递给 jQuery 之前创建整个 HTML 字符串：

var htmlString = "";
for (var i = 0; i < 3; i++) {
    htmlString += "<input type='text' class='' readonly /><br />";
}
$parts_holder.append($(htmlString));

它将减少 jQuery 执行的单个 DOM 操作的数量并加快一切速度。

以防万一您想查看实际情况：

JSFiddle

Answer 2

您正在尝试将 jQuery 对象连接到字符串。这不起作用，因为 jQuery 对象没有有用的 toString 值。

您需要创建一个空的 jQuery 集合，add 将元素添加到该集合，然后附加该集合。

  var $html = $();
  for(var i = 0; i < 3; i += 1)
  {
    $html = $html.add($("<input />", {
      "type"  : "text",
      "class" : "",
      "readonly"  : true
     })).add($("<br />"));
  }
  console.log($html);
  $parts_holder.append($html);