JS DOM Manipulation

Welcome to another tutorial, here you will learn to manipulate elements in JavaScript.
 

Manipulating DOM Elements in JavaScript

Already you've learned how to select and style HTML DOM elements. In this tutorial, you will learn how to add/remove DOM elements dynamically, get their contents, etc.

Adding New Elements to DOM

In an HTML document, you can explicitly create a new element using the document.createElement() method. The document.createElement() method creates a new element, however, it doesn't add it to the DOM. But, you can do it in a separate step, as shown below:

<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 
var newDiv = document.createElement("div");
 
// Creating a text node 
var newContent = document.createTextNode("Hi, how are you doing?");
 
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
 
// Adding the newly created element and its content into the DOM 
var currentDiv = document.getElementById("main"); 
document.body.appendChild(newDiv, currentDiv);
</script>

Try with example

 appendChild() method adds the new element at the end of any other children of a specified parent node. However, if you want to add the new element at the beginning of any other children you can use the insertBefore() method, as shown in the example below:

<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 
var newDiv = document.createElement("div");
 
// Creating a text node 
var newContent = document.createTextNode("Hi, how are you doing?");
 
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
 
// Adding the newly created element and its content into the DOM 
var currentDiv = document.getElementById("main"); 
document.body.insertBefore(newDiv, currentDiv);
</script>

Try with example

To add a new element at the end of any other children of a specified parent node you will use the appendChild() method.

Getting or Setting HTML Contents to DOM

Also, the innerHTML property can be used to get or set the contents of the HTML elements easily. This property gets or sets the HTML markup present within the element (i.e content between its opening and closing tags). This is illustrated in the example below, to see how it works.

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
// Getting inner HTML conents
var contents = document.getElementById("main").innerHTML;
alert(contents); // Outputs inner html contents
 
// Setting inner HTML contents
var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";
</script>

Try with example

The example clearly shows us how easily you can insert new elements into DOM using the innerHTML property, however, there is one problem, which is that the innerHTML property replaces all existing content of an element. Therefore, if you want to insert the HTML into the document you can use the insertAdjacentHTML() method and the existing contents of an element will not be replaced.

The insertAdjacentHTML() method accepts two parameters; the position in which to insert and the HTML text to insert. So, the position must take one of the following values: ‘beforebegin’, ‘afterbegin’, ‘beforeend’, and ‘afterend’. This method is supported in most major browsers.

The example illustrates the visualization of position names and how it works.

<!-- beforebegin -->
<div id="main">
    <!-- afterbegin -->
    <h1 id="title">Hello World!</h1>
    <!-- beforeend -->
</div>
<!-- afterend -->
 
<script>
// Selecting target element
var 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>

Try with example

Note: The ‘beforebegin’ and ‘afterend’ positions work only if the node is in the Document Object Model tree and has a parent element. Also, when inserting HTML into a web page, be cautious so as not to use user input that hasn't been escaped, to prevent an XSS attack.

Removing Existing Elements from DOM

To remove a child node from the DOM you can use the removeChild() method. The removeChild() method also returns the removed node. Below is an example:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>

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

Try with example

It is also possible for you to remove the child element without knowing the parent element. You can do it by simply finding the child element and using the parentNode property to find its parent element, it then returns the parent of the specified node in the DOM tree. Here is an illustration;

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
var childElem = document.getElementById("hint");
childElem.parentNode.removeChild(childElem);
</script>

Try with example

Replacing Existing Elements in DOM

You can also use the replaceChild() method to replace an element in HTML DOM with another. The replaceChild() method accepts two parameters; the node to insert and the node to be replaced. 

The method has the syntax like parentNode.replaceChild(newChild, oldChild);. Here's an illustration:

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

Try with example