Table of Contents

How to Manipulate the DOM Tree in JavaScript

Code Playground is only enabled on larger screen sizes.

In this lesson, we'll discuss how to add a new element in the DOM tree.

Let's assume this is your HTML document:

html

<body>
  <div id="parent">
    <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
    <p id="second" class="blue bold">. . .</p>
    <p id="third" class="red underline">. . .</p>
  </div>
 
  <script src="./index.js"></script>
</body>

Creating an element

First of all, use the createElement() method to create a new paragraph element (<p>) like this:

javascript

let p = document.createElement("p");

Creating and attaching text node

Next, create and attach a text node to the paragraph. You can either use a createTextNode() method:

javascript

let p = document.createElement("p");
 
let text = document.createTextNode(
  "This paragraph is created with JavaScript.",
);

And then append the text node to the paragraph:

javascript

let p = document.createElement("p");
 
let text = document.createTextNode(
  "This paragraph is created with JavaScript.",
);
 
p.appendChild(text);

Alternatively, you can use the innerHTML or textContent properties to create and attach the text node at the same time:

javascript

let p = document.createElement("p");
 
p.innerHTML = "This paragraph is created with JavaScript.";

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";

Inserting element into the DOM tree

Lastly, you must also insert the new paragraph into the DOM tree, there are a few options based on where you wish to insert the node.

Appending element as last child

The append() and appendChild() methods both insert a new node after the last child of the selected element. For example,

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let parent = document.getElementById("parent");
 
// Choose one of the following
parent.append(p);
parent.appendChild(p);

Both append() and appendChild() should give the same result:

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
  <p>This paragraph is created with JavaScript.</p>
</div>

The difference between append() and appendChild() is that append() allows you to append multiple nodes, whereas appendChild() can only append one.

javascript

let p1 = document.createElement("p");
p1.textContent = "Paragraph 1";
 
let p2 = document.createElement("p");
p2.textContent = "Paragraph 2";
 
let parent = document.getElementById("parent");
 
parent.append(p1, p2);

Prepending element as first child

The prepend() method inserts a new node before the first child of the selected element. For instance,

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let parent = document.getElementById("parent");
 
parent.prepend(p);

html

<div id="parent">
  <p>This paragraph is created with JavaScript.</p>
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

There isn't a prependChild() method available.

Inserting before element as sibling

The before() method inserts one or more nodes before the selected element.

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let parent = document.getElementById("parent");
 
parent.before(p);

html

<p>This paragraph is created with JavaScript.</p>
<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

Inserting before a child

The insertBefore() method selects a parent node, and insert a new node before the specified child node under that parent. For example,

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let parent = document.getElementById("parent");
 
parent.insertBefore(p, parent.children[1]);

In this case, parent is selected as the parent node. And parent.children[1], the second child element of parent, is the specified child element.

The new element p will be inserted before that child element.

And this will be the result:

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p>This paragraph is created with JavaScript.</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

Replacing element with a new one

Lastly, you can replace existing elements with a new element.

The replaceWith() method directly replaces the selected element with the new element.

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let second = document.getElementById("second");
 
second.replaceWith(p);

This will be the result:

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p>This paragraph is created with JavaScript.</p>
  <p id="third" class="red underline">. . .</p>
</div>

Alternatively, you can use replaceChild() to replace the child of a parent.

For example,

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let parent = document.getElementById("parent");
let second = document.getElementById("second");
 
parent.replaceChild(p, second);

This time, we are selecting the parent, and then replace one of its children, second, with the new element, p.

It will lead to the same result as before:

html

<div id="parent">
  <p id="first" class="blue underline">. . .</p>
  <p>This paragraph is created with JavaScript.</p>
  <p id="third" class="red underline">. . .</p>
</div>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM Traversal Demo</title>
  </head>
  <body>
    <div id="parent">
      <p id="first">First child</p>
      <p id="middle">Middle child</p>
      <p id="last">Last child</p>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Open Sandbox

Loading course content...

In this lesson, we'll discuss how to add a new element in the DOM tree.

Let's assume this is your HTML document:

html

<body>
  <div id="parent">
    <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
    <p id="second" class="blue bold">. . .</p>
    <p id="third" class="red underline">. . .</p>
  </div>
 
  <script src="./index.js"></script>
</body>

Creating an element

First of all, use the createElement() method to create a new paragraph element (<p>) like this:

javascript

let p = document.createElement("p");

Creating and attaching text node

Next, create and attach a text node to the paragraph. You can either use a createTextNode() method:

javascript

let p = document.createElement("p");
 
let text = document.createTextNode(
  "This paragraph is created with JavaScript.",
);

And then append the text node to the paragraph:

javascript

let p = document.createElement("p");
 
let text = document.createTextNode(
  "This paragraph is created with JavaScript.",
);
 
p.appendChild(text);

Alternatively, you can use the innerHTML or textContent properties to create and attach the text node at the same time:

javascript

let p = document.createElement("p");
 
p.innerHTML = "This paragraph is created with JavaScript.";

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";

Inserting element into the DOM tree

Lastly, you must also insert the new paragraph into the DOM tree, there are a few options based on where you wish to insert the node.

Appending element as last child

The append() and appendChild() methods both insert a new node after the last child of the selected element. For example,

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let parent = document.getElementById("parent");
 
// Choose one of the following
parent.append(p);
parent.appendChild(p);

Both append() and appendChild() should give the same result:

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
  <p>This paragraph is created with JavaScript.</p>
</div>

The difference between append() and appendChild() is that append() allows you to append multiple nodes, whereas appendChild() can only append one.

javascript

let p1 = document.createElement("p");
p1.textContent = "Paragraph 1";
 
let p2 = document.createElement("p");
p2.textContent = "Paragraph 2";
 
let parent = document.getElementById("parent");
 
parent.append(p1, p2);

Prepending element as first child

The prepend() method inserts a new node before the first child of the selected element. For instance,

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let parent = document.getElementById("parent");
 
parent.prepend(p);

html

<div id="parent">
  <p>This paragraph is created with JavaScript.</p>
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

There isn't a prependChild() method available.

Inserting before element as sibling

The before() method inserts one or more nodes before the selected element.

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let parent = document.getElementById("parent");
 
parent.before(p);

html

<p>This paragraph is created with JavaScript.</p>
<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

Inserting before a child

The insertBefore() method selects a parent node, and insert a new node before the specified child node under that parent. For example,

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let parent = document.getElementById("parent");
 
parent.insertBefore(p, parent.children[1]);

In this case, parent is selected as the parent node. And parent.children[1], the second child element of parent, is the specified child element.

The new element p will be inserted before that child element.

And this will be the result:

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p>This paragraph is created with JavaScript.</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

Replacing element with a new one

Lastly, you can replace existing elements with a new element.

The replaceWith() method directly replaces the selected element with the new element.

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p id="second" class="blue bold">. . .</p>
  <p id="third" class="red underline">. . .</p>
</div>

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let second = document.getElementById("second");
 
second.replaceWith(p);

This will be the result:

html

<div id="parent">
  <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
  <p>This paragraph is created with JavaScript.</p>
  <p id="third" class="red underline">. . .</p>
</div>

Alternatively, you can use replaceChild() to replace the child of a parent.

For example,

javascript

let p = document.createElement("p");
 
p.textContent = "This paragraph is created with JavaScript.";
 
let parent = document.getElementById("parent");
let second = document.getElementById("second");
 
parent.replaceChild(p, second);

This time, we are selecting the parent, and then replace one of its children, second, with the new element, p.

It will lead to the same result as before:

html

<div id="parent">
  <p id="first" class="blue underline">. . .</p>
  <p>This paragraph is created with JavaScript.</p>
  <p id="third" class="red underline">. . .</p>
</div>