What You Need To Know About JavaScript DOM Manipulation

Today let’s learn JavaScript DOM manipulation using JavaScript – how to manipulate elements using JavaScript. If you missed last article, last time we covered JavaScript Get and Set attributes, you can find this article here.

Manipulating DOM Elements In JavaScript

Now that we’ve learnt how to select and style HTML DOM elements. In this chapter we will learn how to add or remove DOM elements dynamically, get their contents etc.

How To Add New Elements To DOM In JavaScript

You can create new element in an HTML document by using the document.createElement() method. This method creates a new element but it does not add it to the DOM. That means that you will have to do that in a separate step. Here’s an example for you:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
// Creating a new div element 
let newDiv = document.createElement("div");
 
// Creating a text node 
let newContent = document.createTextNode("Hi, this is random text sample");
 
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
 
// Adding the newly created element and its content into the DOM 
let currentDiv = document.getElementById("main"); 
document.body.appendChild(newDiv, currentDiv);
</script>

The appendChild() method adds the new element at the end of any other child of a specified parent element. But if you want to add the new element specifically at the beginning you have to use the insertBefore() method. Here’s how that looks:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
// Creating a new div element 
let newDiv = document.createElement("div");
 
// Creating a text node 
let newContent = document.createTextNode("Hi, this is random text sample");
 
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
 
// Adding the newly created element and its content into the DOM 
let currentDiv = document.getElementById("main"); 
document.body.insertBefore(newDiv, currentDiv);
</script>

How To Get Or Set HTML Content To DOM In JavaScript

You can get or set the content of the HTML elements easily with the innerHTML property. This property sets or gets the HTML contained within the element. Here how it looks:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
// Getting inner HTML conents
let contents = document.getElementById("main").innerHTML;
console.log(contents); // Outputs inner html contents
 
// Setting inner HTML contents
let mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>This is <em>the best</em> BLOG.</p>";
</script>

Just keep in mind that innerHTML replaces all existing content of that element. So if you want to insert the HTML into the document without replacing the existing contents of an element, you have to use the insertAdjacentHTML() method.

This method accepts two parameters – the position in which to insert and the HTML text that you want to insert. The position must be one of the following values: beforebegin, afterbegin, beforeend, and afterend. Here’s how this works:

<!-- beforebegin -->
<div id="main">
    <!-- afterbegin -->
    <h1 id="title">Hello World!</h1>
    <!-- beforeend -->
</div>
<!-- afterend -->
 
<script>
// Selecting target element
let mainDiv = document.getElementById("main");
 
// Inserting HTML just before the element itself, as a previous sibling
mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph one.</p>');
 
// Inserting HTML just inside the element, before its first child
mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph two.</p>');
 
// Inserting HTML just inside the element, after its last child
mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph three.</p>');
 
// Inserting HTML just after the element itself, as a next sibling
mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');
</script>

How To Remove Existing Elements From DOM In JavaScript

To remove child node from the DOM you have to use removeChild() method. This method also returns the removed node. Here’s an example:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is simplywebstuff.com</p>
</div>

<script>
let parentElem = document.getElementById("main");
let childElem = document.getElementById("hint");
parentElem.removeChild(childElem);
</script>

It is also possible to remove the child element without exactly knowing the parent element. You have to find child element using the parentNode property to find its parent element. This property returns the parent of the specified node in the DOM tree. Here’s an example:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is simplywebstuff.com</p>
</div>
 
<script>
let childElem = document.getElementById("hint");
childElem.parentNode.removeChild(childElem);
</script>

How To Replace Existing Elements In DOM In JavaScript

You can replace an element in HTML DOM with another element by using the replaceChild() method. This method accepts two parameters – the code to insert and the code to be replaced.

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
let parentElem = document.getElementById("main");
let oldPara = document.getElementById("hint");
 
// Creating new elememt
let newPara = document.createElement("p");
let newContent = document.createTextNode("This is a new paragraph.");
newPara.appendChild(newContent);
 
// Replacing old paragraph with newly created paragraph
parentElem.replaceChild(newPara, oldPara);
</script>