Question

我正在使用从Codepen获得的这段代码将div节点附加到父div及其工作正常。

var el = document.getElementById('items'),

elChild = document.createElement("div");

elChild.innerHTML = '<div class="product"><a href="product1.html"><img  src="images/product1.png" alt="product1" /></a></div>'

el.appendChild(elChild);

我如何添加更多div元素，因为我尝试按照下面的代码添加它们，但失败了，在此先感谢

var el = document.getElementById('items'),

elChild = document.createElement("div");

elChild.innerHTML = '<div class="product"><a href="product1.html"><img   src="images/product1.png" alt="product1" /></a></div>'
                    '<div class="product"><a href="product2.html"><img src="images/product2.png" alt="product2" /></a></div>'
                    '<div class="product"><a href="product3.html"><img src="images/product3.png" alt="product3" /></a></div>'


el.appendChild(elChild);

Answer 1

这似乎是一个简单的语法错误：

elChild.innerHTML = '<div class="product"><a href="product1.html"><img  src="images/product1.png" alt="product1" /></a></div> <div class="product"><a href="product2.html"><img src="images/product2.png" alt="product2" /></a></div><div class="product"><a href="product3.html"><img src="images/product3.png" alt="product3" /></a></div>'

内部html接受整个文本字符串，而不是您发布的3个单独的字符串。

另外，如果您在innerHTML中动态创建div，则效果会更好，因为它们遵循明确的模式：

var nProducts = 3, out="";
for(var i=1; i<=nProducts; i++){
    out+= '<div class="product"><a href="product'+i+'.html"><img src="images/product'+i+'.png" alt="product'+i+' " /></a></div>';
}
elChild.innerHTML = out;

此代码应为您想要的div中的n产品创建结构。

根据您的规范进行编辑： （尽管您应该自己学习如何做，但是w3schools是一个不错的起点）

var products = ["phones", "computers", "whatever-other-product"]; //Create an array of your product names
var out="";
for(var i=0; i<products.length; i++){ //loop through the products array
    out+= '<div class="product"><a href="'+products [i]+'.html"><img src="images/'+product[i]+'.png" alt=" '+product[i]+' " /></a></div>';
}
elChild.innerHTML = out;

Answer 2

经过一些研究，是迄今为止我找到的最有效，最简单的方法。

let cloneNode = document.querySelectorAll(".item-card");
cloneNode.forEach(element => document.querySelector(".items").appendChild(element.cloneNode(true)) )

如何附加多个子div节点

2 个答案: