Tutorials Tonight
Follow Us

JAVASCRIPT DOM MANIPULATION


Suppose you want to write a simple web app, one of the most common things that you will want to do is document manipulate. It is modification of the document by making some change..

Using DOM manipulation you will be able to create some interactive feature on the webpage.

Javascript has a power that it can manipulate the DOM structure of the webpage, can add an element, remove elements, replace elements, etc.

What is DOM Manipulation in javascript?

DOM manipulation is change and modification of the document object model using JavaScript.

Javscript provides various method by which developers can:


DOM manipulation methods

TO work with DOM and to modify it we need some tools to work with to finish the job, those tools are few methods provided by JavaScript to modify the DOM.

Here is the list of the methods that we are going to use in this section:

  1. createElement()
  2. append()
  3. removeChild()
  4. replaceChild()

1.Create Element In JavaScript

It is common for interactive websites to create new element dynamically on user's action and use them.

So, how do you create a new element?

The way we create new elements is by using the createElement method. Call the createElement method via document object and pass the tag name of the element you wish to create.

const element = document.createElement('p');

The element variable return the reference of the created element.

The createElement method converts the tag name of the element to lower case before creating the element.

const element1 = document.createElement('p');
console.log(element1);
const element2 = document.createElement('div');
console.log(element2);
// method lower case the passed tag name
const element3 = document.createElement('DIV');
console.log(element3);
▶ Run the code

The element created by the createElement() method does not automatically attach to the document, we have to explicitly append elements to the document.


2. JavaScript Append Element

Since now we have created the element and also has stored the reference of the element in a variable, but the created element is floating aimlessly because DOM does not know about the created element till now.

append element in javascript

To make the created element part of the document we have to specify it a parent element and append a newly created element to it.

To append element use the append() method. It inserts a set of Node objects or DOMString object as a last child of the ParentNode.

Syntax:

parentNode.append();

The reference of Node element which has to be appended is passed as an argument to the method. The method calling element is known as the parent while the element which is appended is called the child.

appending element to the parent element
<div id="parent">
  <p>This is first child.</p>
</div>
<button onclick="addChild()">Add Child</button>

<script>
  function addChild() {
    const parent = document.getElementById("parent"); // selecting parent
    const child = document.createElement("p"); // creating child
    child.innerHTML = "This is second child"; // adding some content
    parent.append(child);
  }
</script>
▶ Run the code

Output: After button click

append element output

3. JavaScript Remove Element From DOM

In an interactive web application, you will not only want to creates and append a new element to the document but also to remove any desired element.

The removeChild method removes an element from the DOM structure. The Node which is to be removed is passed as an argument to the method.

The method removeChild returns a reference to the child node which is deleted.

parent.removeChild(child)

Here is an example which removes the child element with id 'secondChild'.

const parent = document.getElementById("parent"); // selecting parent
const child = document.getElementById("secondChild"); // selecting child

function remove() {
  parent.removeChild(child);
}
▶ Run the code

Note: You need to call removeChild method from the parent of the child otherwise it will throw an error.


4. Replace Element with other Element

The replaceChild() method replaces a node with another node in the DOM.

parent.replaceChild(newElement, oldElement)

The method returns the element which is replaced.

const parent = document.getElementById("parent"); // selecting parent
const oldElement = document.getElementById("child"); // selecting oldElement
const newElement = document.createElement("h2"); // creating newElement which is h2

function replace() {
  newElement.innerHTML = "This is new element, old element replaced by this."
  parent.replaceChild(newElement, oldElement);
}
▶ Run the code