Как добавить несколько дочерних узлов div - PullRequest
Новая
       10

Как добавить несколько дочерних узлов div

0 голосов
/ 11 октября 2018

Я использую этот код, полученный из 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);

1 Ответ

0 голосов
/ 11 октября 2018

Кажется, это простая синтаксическая ошибка: 

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 отдельные строки, как вы отправили.

Также это может быть дажелучше, если вы динамически создали div в своем innerHTML, поскольку они следуют четкому шаблону: 

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;

Этот код должен создать структуру для n продуктов в нужном вам div.

Отредактируйте в соответствии с вашими требованиями: (Хотя вы должны научиться делать это самостоятельно, 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;
...