[Edit]

JavaScript - append multiple HTML elements at once

1 contributors

2 contributions

0 discussions

0 points

Created by:

Kenya-Spears

860

In this article, we would like to show you how to append multiple HTML elements at once using JavaScript.

Quick solution:

xxxxxxxxxx
 
element.append(chlidElement1, childElement2, childElementN);

Warning: append() method appeard in the major web browsers around 2016-2018.

Practical example

Edit

In this example, we create new child elements and use append() method to append them at once to the container element.

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <div id="container"></div>
  <script>
​
    var container = document.querySelector('#container');
    
    // create children elements
    var newChild1 = document.createElement('div');
    var newChild2 = document.createElement('div');
​
    // set children text
    newChild1.textContent = 'new child 1';
    newChild2.textContent = 'new child 2';
    
    // append children to the container
    container.append(newChild1, newChild2);
​
  </script>
</body>
</html>