在尝试操作dom时，Jquery返回

我试图动态地将html片段（输入元素）插入到现有的div节点中。

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

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

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

这就是我想要实现的目标

Answer 1

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

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

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

Answer 2

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

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

 var htmlString = ""; for (var i = 0; i < 3; i++) { htmlString += "
"; } $parts_holder.append($(htmlString)); 

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

如果你想看到实际的事情：

的jsfiddle