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

jquery appendTo multiple items to one container

本文关键字：一个 appendTo 项目 添加 jquery      更新时间：2023-09-26

我在实现这一点时遇到了问题。当我查看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，则会显示第二个图像，或者如果我颠倒顺序，则第二个将显示，而不是第一个。

这实际上与appendTo无关，而是与我的#div和图像大小有关。奇怪的

我可以向您展示如何使用本机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);
相关文章：