如何附加多个子 div 节点

Question

我正在使用从代码笔获得的这段代码将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)) )