-2

I'm using this code i got from codepen to append div nodes to parent div and its working fine.

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);

How can i add more div elements to because i tried adding them as in the code below and it failed, Thanks in advance

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);
Stephen
  • 31
  • 6

2 Answers2

2

It seems to be a simple syntax error:

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>'

Inner html takes in one entire string of text, not 3 separate strings as you posted.

Also it might be even better if you dynamically created the divs in your innerHTML since they follow a clear pattern:

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;

This code should create the structure for n products in the div that you want.

Edit according to your specifications: (Although you should be learning how to do it yourself, w3schools is a good place to start)

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;
Samleo
  • 605
  • 5
  • 16
  • Thanks a lot, I used product1, product2, and product3 as examples, how can I replace them with phones.HTML , computers.HTML , cameras. HTML – Stephen Oct 11 '18 at 05:20
  • Try using an array to store the values instead – Samleo Oct 12 '18 at 01:25
  • @Stephen see my edited answer.. I do advise that you learn more about this through tutorial sites like w3schools – Samleo Oct 12 '18 at 01:32
  • Please Samleo, I've tried to get some tutorials on how to append and display the products in div id='items' but i have failed, any help appreciated. – Stephen Oct 12 '18 at 02:34
0

The most efficient and simple method I have found so far after some research.

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