tutorialstonight logo
A Platform To Learn To Code

Javascript DOM MANIPULATION



We frequently need to manipulate elements of a webpage using javascript to create some interactive feature on the webpage.

Javascript has power that it can manipulate the DOM structure of the webpage, also one of the Most useful and unique features of javascript is its ability to manipulate DOM.

What is DOM Manipulation in Javascript?

DOM manipulation is a process or a way by which you can change the structure of DOM by including new elements, deleting older elements, making changes in existing elements etc.

DOM manipulation includes :

  • Create new element
  • Attach new element to the DOM
  • Removing old element from the DOM
  • Replacing an element with another element
  • Making change in existing element by adding style or by adding content
  • Adding new attribute to the HTML element


How To Manipulate DOM with Javascript?

There are lots of things that we can do in DOM manipulation, but before manipulating DOM we need to select the element that we want to change.

To select the element use DOM access methods. One of the most used element selection methods is document.getElementById("id1").

Now as we have selected the DOM element so we can use the DOM manipulation method on the element.


DOM manipulation methods

In this section we will look at those DOM methods which change the structure of DOM. Lets first list the methods and then see their examples and explanations.

Most common javascript method for DOM manipulation are:

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


1. createElement() - Create an HTML element

The createElement() method creates HTML elements using the tag name of the elements like 'p', 'a', 'h1', 'div' etc.

The tag name of the element is passed as arguments in the method. Example document.createElement('p') will create a 'p' tag.

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

Example

Run the code

2. appendChild() - Append an HTML element to the parent element

The appendChild() method appends an element as the last child of the element which invokes this method.

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

add html element using javascript

Syntax:

parent.appendChild(child);

Example

Run the code

3. removeChild() - Remove an Element from the DOM

The removeChild() method removes an element from the DOM structure. The element which is to be deleted is passed as an argument to the method.

The method removeChild() also returns reference to the child node which is deleted.

parent.removeChild(child)
  • parent - Parent element whose child to be removed
  • child - Element which will be removed

Example

Run the code

4. replaceChild() - Replace an Element with other Element

The replaceChild() method replaces one element with another element in the DOM.

parent.replaceChild(newElement, oldElement)
  • parent - Parent element whose child to be replaced
  • newElement - Element which will replace other one
  • oldElement - Element which will be replaced

Example

Run the code

DOM Events