DEV Community

Cover image for Append multiple elements using append()
Dom (dcode)
Dom (dcode)

Posted on

Append multiple elements using append()

In this article we're going to take a look at a couple of relatively new methods in JavaScript to easily add new nodes (or elements) to the DOM.

First, let's look at compatibility

These methods are supported in many major browsers, but please consider compatibility before using them in production:
DOM manipulation convenience methods on Can I use...

Video Tutorial

If you'd prefer this in the form of a video, check out my tutorial on the append() method here 👇

Methods called on Parent Nodes

append()

The append method allows you to append multiple elements or text nodes to a parent node.

const myParent = document.getElementById("someDiv");
const mySpan = document.createElement("span");

mySpan.textContent = "I am a span!";
myParent.append(mySpan, "Hey I will turn into a text node...");
Enter fullscreen mode Exit fullscreen mode

And the result:

<div id="someDiv">
    <span>I am a span!</span>
    Hey I will turn into a text node...
</div>
Enter fullscreen mode Exit fullscreen mode

As you can see, you can supply an unlimited amount of arguments to the append() method and it will append everything to the parent.

Along with this, any strings you pass through will be automatically converted to text nodes for your convenience 😁

The rest of the methods in this article work in a similar way. Let's take a look at a few more.

prepend()

The prepend method will insert nodes before the first child of a parent.

For example, using the result HTML from before:

<div id="someDiv">
    <span>I am a span!</span>
    Hey I will turn into a text node...
</div>
Enter fullscreen mode Exit fullscreen mode

And using this code:

const myParent = document.getElementById("someDiv");
const myInnerDiv = document.createElement("div");

myInnerDiv.id = "myInnerDiv";
myParent.prepend(myInnerDiv, "Hey another text node");
Enter fullscreen mode Exit fullscreen mode

Will give us:

<div id="someDiv">
    <div id="innerDiv"></div>
    Hey another text node
    <span>I am a span!</span>
    Hey I will turn into a text node...
</div>
Enter fullscreen mode Exit fullscreen mode

Methods called on Child Nodes

Similar to the two methods above, we have a few more methods available that achieve similar goals on child nodes.

before() and after()

These work in the exact same way, but are called directly on child nodes.

Use before to insert nodes before a child node:

/* inserts #div1, #div2 and "some more text" before #someDiv */
someDiv.before(div1, div2, "some more text");
Enter fullscreen mode Exit fullscreen mode

Same deal for after:

/* inserts #div1, #div2 and "some more text" after #someDiv */
someDiv.after(div1, div2, "some more text");
Enter fullscreen mode Exit fullscreen mode

replaceWith()

The replaceWith method is a little different to the previous ones - this one lets you replace a child node with another given set of nodes.

Given this HTML:

<div id="someDiv">
    <a id="about" href="/about">About</a>
</div>
Enter fullscreen mode Exit fullscreen mode

Using this code:

const about = document.getElementById("about");
const mySpan = document.createElement("span");

mySpan.textContent = "I am a span";
about.replaceWith(mySpan, "my name is Dom");
Enter fullscreen mode Exit fullscreen mode

Will give us:

<div id="someDiv">
    <span>I am a span</span>
    my name is Dom
</div>
Enter fullscreen mode Exit fullscreen mode

And there you go - those are a few convenient DOM methods for adding/replacing nodes 😁

Top comments (1)

Collapse
 
isa56 profile image
isa56 • Edited

I have a question about this (2 years later, sorry): can I append items that are on a array?
I want to render li elements with text from localStorage (it is a basic DOM exercise I'm planning) inside a ul, so I was planning on using an array as I do not know how many elements are going to be created.
Is there any way to do it?

Edit: I know editing DOM is costly, so I do not know if it is best to do something like:

for (let i=0; i<listItems.length; i++) {
   unorderedList.append(listItems[i])
}
Enter fullscreen mode Exit fullscreen mode

Would this be appropriate?