Must-Know Append JavaScript Explained

Learn how to add one or more node objects or string objects after the last child of the element inside a specific parent element using the append() method in JavaScript.

1. Append Element Node
2. Append Text Node
3. Append Multiple Elements At Once

1. Append Element Node

Let’s append an element node as a last child element of the parent element (section#box-wrapper).

Here is the simple HTML Markup.

<section id="box-wrapper">
  <div class="box">div <br>1</div>
  <div class="box">div <br>2</div>
  <div class="box">div <br>3</div>
  <div class="box">div <br>4</div>
</section>

First, get a DOM reference of the parent element (section#box-wrapper) where we want to insert a new element to.

Call getElementById() method on the document object and pass the id (box-wrapper) as an argument to ti.

const boxWrapper = document.getElementById("box-wrapper");

Then, create a div element by running the createElement() method on the document object.

The createElement() method is one of the 3 ways of creating an HTML element in JavaScript.

It takes one argument, which is an HTML element that we want to create.

In this case: div

Assign it to a constant called box5.

const box5 = document.createElement("div");
box5.innerHTML = 'div <br> 5';
box5.classList.add("box");
box5.style.backgroundColor = "orange";

Set the content, background color to the element using innerHTML, backgroundColor properties respectively.

Add the box class to the element by invoking the add() method on the classList object.

Finally, append the newly created child element to the parent element (section#box-wrapper).

This will insert the new element after the last child of the Element.

In this case, after the div 4.

boxWrapper.append(box5);

Try it out

See the Pen Append JavaScript by SoftAuthor (@softauthor) on CodePen.

2. Append Text Node/String

Using the append() method, you can also insert text node objects in addition to element node objects.

To do that, invoke createTextNode() method on the document object.

Pass the text as an argument to the createTextNode() method that you want to add to the DOM

In this case: Hey, there!

Assign it to a constant text.

const text = document.createTextNode("Hey there!");
boxWrapper.append(text);

Finally, insert the text after the last child of the element inside the parent element (boxWrapper) by calling the append() method on the boxWrapper object passing text as an argument to it.

Try it out

See the Pen Append JavaScript #2 by SoftAuthor (@softauthor) on CodePen.

Alternatively, you can also add text as an argument directly to the append() method, unlike the appendChild() method.

boxWrapper.append("Hey there!");

3. Append Multiple Elements At Once

Next, let’s see how to add multiple elements at once using the append() method in JavaScript.

Let’s add two div elements after the last child of the element inside the parent element (section#box-wrapper) using the append() method.

It’s one of the features that the append() method has that appendChild() does not.

Append both div element node objects by passing them as arguments of the append() method separated by a comma .

const box5 = document.createElement("div");
box5.innerHTML = 'div <br> 5';
box5.classList.add("box");

const box6 = document.createElement("div");
box6.innerHTML = 'div <br> 6';
box6.classList.add("box");

boxWrapper.append(box5, box6);

Try it out

See the Pen Append JavaScript #3 by SoftAuthor (@softauthor) on CodePen.

There you have it!

If you’ve any suggestions, feedback or want to add something else to this tutorial, please reach out to me by commenting below.

Thanks for reading…