Sometimes, we want to append multiple child elements with JavaScript.

In this article, we’ll look at how to append multiple child elements with JavaScript.

Append Multiple Child Elements with JavaScript

To append multiple child elements with JavaScript, we can use the append method.

For instance, if we have a ul element:

<ul>

</ul>

Then we write:

const listElement = document.querySelector('ul')
const listItem = document.createElement("li");
const listItemCheckbox = document.createElement("input");
const listItemLabel = document.createElement("label");

listElement.append(listItem, listItemCheckbox, listItemLabel);

to select the ul element with document.querySelector and assign the returned element to listElement.

Then we create some elements with document.createElement.

Finally, we call listElement.append with the elements we created as arguments to append them as the child of the ul element.

Conclusion

To append multiple child elements with JavaScript, we can use the append method.