DEV Community

Cover image for How to Append Multiple Elements at Once in JavaScript DOM
Dom (dcode)
Dom (dcode)

Posted on

How to Append Multiple Elements at Once in JavaScript DOM

In today's post, I'll be taking you through 2 of my favourite ways to append multiple child elements to a parent element with the JavaScript DOM.

1. insertAdjacentHTML()

This is one of the most underrated methods in JavaScript. You can use insertAdjacentHTML() to insert an HTML string at a specified position relative to a parent element.

It supports a total of 4 positions, but the one we're interested in for appending elements is beforeend (insert before the end of the parent element).

Let's see it in action.



/*
    HTML:

    <ul id="fruit">
        <li>Apple</li>
        <li>Banana</li>
    </ul>
*/

const fruitList = document.getElementById("fruit");

// Add 3 new <li>'s to the list of fruits
fruitList.insertAdjacentHTML("beforeend", `
    <li>Pear</li>
    <li>Orange</li>
    <li>Grape</li>
`);


Enter fullscreen mode Exit fullscreen mode

As you can see, it's easy to append multiple elements using plain HTML. To make it even simpler, you can use template literals to take advantage of multi-line HTML as I've done above ๐Ÿ‘†

2. append()

The above technique uses HTML strings, but what if you wanted to build the DOM elements manually? Sometimes, doing it this way makes it easy to add event listeners or perform operations on the elements.

Let's explore the same example as above, this time using the append() method which works like appendChild() but lets you pass in multiple items.



/*
    HTML:

    <ul id="fruit">
        <li>Apple</li>
        <li>Banana</li>
    </ul>
*/

const fruitList = document.getElementById("fruit");

const pearListItem = document.createElement("li");
const orangeListItem = document.createElement("li");
const grapeListItem = document.createElement("li");

pearListItem.textContent = "Pear";
orangeListItem.textContent = "Orange";
grapeListItem.textContent = "Grape";

// Add 3 new <li>'s to the list of fruits
fruitList.append(pearListItem, orangeListItem, grapeListItem);


Enter fullscreen mode Exit fullscreen mode

It's also worth noting that the append() method also lets you pass in text nodes or plain-text strings.

If you have any other techniques, please leave them down below!

Enrol Now ๐Ÿ‘‰ JavaScript DOM Crash Course

You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below ๐Ÿ‘‡

https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Course Thumbnail

Happy coding ๐Ÿ˜Ž

Top comments (2)

Collapse
 
artydev profile image
artydev • Edited

Hy Dom,

Nice thank you.
I have assembled some functions in my MVU library, which precisely aims at creating and appending elements easily.

<script src="https://cdn.jsdelivr.net/gh/artydev/mvu@2.0/dist/mvu.umd.js"></script>

<div id="app">

</div>

<script>

  const {m, render } = MVU;

  const div = m("div");
  const button = m("button")

  let liste = div(`
    <ul>
      <li>A</li>
      <li>B</li>
    </ul>
  `);

  let greeter = button("Hy Dom");
  greeter.onclick = () => alert("Hy Dom")

  console.log(liste)

  render(app, liste, greeter)
</script>



Enter fullscreen mode Exit fullscreen mode

You can test it here : DemoDom

Collapse
 
atundebarnabas profile image
Atundebarnabas

Nice