JavaScript DOM Manipulation


In this tutorial, you are going to learn JavaScript DOM Manipulation. You will learn how to manipulate the DOM in javascript, why we need DOM manipulation, what can you do in DOM manipulation, etc.

Suppose you want to create an interactive web application that modifies content and elements on the application as as users interact with it.

You can achieve this by changing the webpage dynamically. These are the most common things that you will want to do.

    Table Of Contents

  1. What is DOM manipulation
  2. DOM manipulation methods
    1. Creating new element
    2. Appending new element
    3. Removing element
    4. Replacing element
    5. Changing style
    6. Adding attribute
    7. Removing attribute
    8. Adding event listener
  3. DOM manipulation cheat sheet
  4. Practice DOM manipulation
javascript DOM manipulation

What is DOM Manipulation in javascript?

DOM Manipulation is the process of changing the content and structure of the DOM (document object model). The DOM can be modified by adding, removing, or modifying elements and their attributes.

JavaScript DOM manipulation includes any of the following:


JavaScript DOM Manipulation Methods

To make some changes in DOM or to modify the DOM elements we need some methods given by JavaScript to do so.

Here is the list of the tasks that you can do using DOM manipulation methods:

  1. Creating new element
  2. Appending new element
  3. Removing element
  4. Replacing element
  5. Changing style
  6. Adding attribute
  7. Removing attribute
  8. Adding event listener

1. Create Element In JavaScript

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

To create a new element in the DOM, we need to use the document.createElement() method and pass the name of the element as an argument.

Look at the example below:

// creating paragraph element
var element = document.createElement('p');

// creating image element
var element = document.createElement('img');

// creating anchor element
var element = document.createElement('a');

The reference of the created element is returned by the document.createElement() method and stored in the variable.

The createElement() method converts the tag name of the element to lower case before creating the element. So you can pass element name both in lower case and upper case.

Example

// capital letter
var element = document.createElement('IMG');

// lower case
var element = document.createElement('div');

// mixed case
var element = document.createElement('TaBlE');

// all of the above are valid code
Try It

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


2. Appending Element Using JavaScript

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 a part of the document we have to explicitly attach it to the document using some methods.

  1. append() - It appends the Node objects or DOMString object to the parent element.
  2. appendChild() - It can append only Node objects to the parent element.

Here is a working example:

Example

<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

    // appending child to parent
    parent.append(child);
    // you can also use appendChild()
  }
</script>
Try It

Output: After button click

append element output

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

3. Remove Element From DOM

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

The removeChild() method is used to remove the child element from the parent element. The reference of the child element is passed as an argument to the method.

Syntax:

parentElement.removeChild(childElement);

Here is an example that removes the child element from the parent element:

Example

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

// removing child from parent
parent.removeChild(child);
Try It

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

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


4. Replace Element with Other Element

The replaceChild() method is used to replace the child element with another element.

Syntax:

parentElement.replaceChild(newChild, oldChild);

The method returns the element which is replaced.

Example

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

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

5. Changing Style of Element

You can also change the style of an element dynamically on an action. To change the style of an element you can use use the style property of the element.

With the style property, you can control any CSS property of the element like color, font, border, etc.

Syntax:

element.style.property = value;

Here is an example that changes the color of the element:

Example

// selecting element
const element = document.getElementById("element");

// changing color of element
element.style.color = "red";
Try It

6. Adding Attribute to Element

You can add an HTML attribute to an element using the setAttribute() method.

Syntax:

element.setAttribute(attribute, value);

Here is an example that adds the attribute title to the element:

Example

// selecting element
const element = document.getElementById("element");

// adding attribute
element.setAttribute("title", "This is a title");
Try It

7. Removing Attribute from Element

You can also remove attributes from an HTML element using the removeAttribute() method in JavaScript.

To remove an attribute call the method on the element and pass the attribute name as an argument.

Example

var element = document.getElementById("element");

// removing attribute
element.removeAttribute("title");
Try It

8. Adding Event Listener to Element

The addEventListener() method is used to add an event listener to an element.

An event listener is a function that is called when an event occurs on an element.

Syntax:

element.addEventListener(event, function);

Here is an example that adds mouseover event to the element:

Example

// selecting elemewhichnt
const element = document.getElementById("element");

// adding event listener
element.addEventListener("mouseover", function() {
  alert("Mouse is over the element.");
});
Try It

Javascript DOM Manipulation Cheat Sheet

Javascript DOM Manipulation Cheat Sheet

Javascript DOM Manipulation Practice

Here are some practice problems to practice DOM manipulation.

  1. Create a table element and add it to the body.
  2. Create a table row element and add it to the table.
  3. Remove 2nd row from the table.
  4. Add a class attribute to the table row.
  5. Replace 3rd row with a new row.
  6. Add an event listener to the table.

Conclusion

JavaScript DOM manipulation is a powerful tool provided by the language using which we can do a lot of things with HTML. It is very useful when we want to add a lot of functionality to our website.

You can add, remove, change, add an event listener to an element using DOM manipulation.

With all this knowledge you can now create a lot of cool websites.