JavaScript DOM Manipulation

How to Manipulate DOM Elements in JavaScript

Now that you'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, and so on.

How to Add New Elements to DOM

You can explicitly create new element in an HTML document, using the document.createElement() method. This method creates a new element, but it doesn't add it to the DOM; you'll have to do that in a separate step, as shown in the following example:

Example of Code

<div id="javascript-dom-manipulat-1-main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
<button type="button" onclick="insertElement()">Insert Element</button>
<script>
function insertElement() {
    // Creating a new div element 
    var newDiv = document.createElement("javascript-dom-manipulat-1-main");
    // 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("javascript-dom-manipulat-1-main"); 
    document.body.appendChild(newDiv, currentDiv);
}    
</script>

Output

How to Get or Set HTML Contents to DOM

You can also get or set the contents of the HTML elements easily with the innerHTML property. This property sets or gets the HTML markup contained within the element i.e. content between its opening and closing tags. Checkout the following example to see how it works:

Example of Code

<div id="javascript-dom-manipulat-2-main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
<button type="button" onclick="getContents()">Get Contents</button>
<button type="button" onclick="setContents()">Set Contents</button>
<script>
function getContents() {
    // Getting inner HTML conents
    var contents = document.getElementById("javascript-dom-manipulat-2-main").innerHTML;
    alert(contents); // Outputs inner html contents
}
function setContents() {
    // Setting inner HTML contents
    var mainDiv = document.getElementById("javascript-dom-manipulat-2-main");
    mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";
}    
</script>

Output

How to Removing Existing Elements from DOM

The JavaScript removeChild() method is used to remove a child node from the DOM. This method also returns the removed node. Here's an example:

Example of Code

<div id="javascript-dom-manipulat-3-main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
<button type="button" onclick="removeElement()">Remove Element</button>    
<script>
function removeElement() {
    var parentElem = document.getElementById("javascript-dom-manipulat-3-main");
    var childElem = document.getElementById("hint");
    parentElem.removeChild(childElem);
}
</script>

Output

How to Replace Existing Elements in DOM

The JavaScript replaceChild() method is used to replace an element in HTML DOM with another. This method accepts two parameters: the node to insert and the node to be replaced. It has the syntax like parentNode.replaceChild(newChild, oldChild);. Here's an example:

Example of Code

<div id="javascript-dom-manipulat-4-main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>    
<button type="button" onclick="replaceParagraph()">Replace Paragraph</button>    
<script>
function replaceParagraph() {
    var parentElem = document.getElementById("javascript-dom-manipulat-4-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>

Output