Insert array of elements into the DOM? [duplicate]

Answer 1

To recollect what others have said:

• in JS, you iterate over an array with array.forEach which takes one argument - a function that will be called on all the elements of the array sequentially
• to append (add at the end) an element to the DOM (body of the page) you call document.body.appendChild which takes the element to be added as an argument

Code you need then becomes

itemsAll.forEach(function (element, index, array) {
    document.body.appendChild(element);
})

or (using ES6 syntax)

itemsAll.forEach(el => document.body.appendChild(el)) 

Answer 2

You may simply use .append() to append multiple DOM nodes all at once as follows;

var divs = Array.from({length:10}) // lets make an array of 10 divs
                .map(function(_,i){
                       var el = document.createElement('div');
                       el.textContent = `I am div # ${i}`;
                       return el;
                     });
document.body.append(...divs);

Answer 3

Iterating over array and appending each using appendChild:

itemsAll.forEach(el => {
  document.body.appendChild(el)
})

Answer 4

To add the elements to the body, you need to append them to the body of your document. This is done by using the appendChild(element) function :

// looping through your array : 
for (let i=0;i<itemsAll.length;i++) {
     // appending your elements to the body :
     document.body.appendChild(itemsAll[i]);
}