Question

我遇到了解决这个问题的问题。当我在firebug中查看HTML时，它显示我的容器中有2个对象，但只有1个img显示！

我有一些非常简单的代码：

var img1 = $("<img />", {src : "myimg.png" });
var img2 = $("<img />", {src : "myimg2.png" });
img1.appendTo("#div");
img2.appendTo("#div");

<div id="div"></div>

但是只有第一张图片会显示，如果我注释掉第一张appendTo，那么第二张图片会显示，或者如果我按顺序反转第二张图片而不是第一张图片。

Answer 1

这实际上并不与appendTo相关，而是我的#div和图片大小。奇怪。

Answer 2

我可以告诉你如何使用原生javascript追加元素吗？它的语法更快，非常相似。另外，它会让你成为更好的程序员。

首先，如果你还没有，请结帐javascript模板。我个人使用http://handlebarsjs.com/。

无论如何，这里是如何用javascript做你想要的。

var parentElement = document.getElementById("div");
var fragment = document.createDocumentFragment(); 

["myimg.png", "myimg2.png"].forEach(function(src) {
 var element = document.createElement("img");
 element.src = src;
 fragment.appendChild(element);
}); 

parentElement.appendChild(fragment);

jquery append将多个项目添加到一个容器中

2 个答案: