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对象没有有用的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);

Answer 2

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

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

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

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

以防万一你希望看到实际行动：

JSFiddle

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

2 个答案: