Dom Manipulations

The main object is the Document Object , which in turn contains several other child objects. Each and every single element in the document will have a corresponding presence in the DOM tree . The document object is a built-in object that has many properties and methods that we can use to access and modify websites.

Create a DOM element

In order to create new elements in the DOM, it provides a generic method createElement() , that takes as an argument an HTML tag name, and returns a plain DOM node of the specified type.
<!DOCTYPE html> <html> <body> <p>Days:</p> <ul id="days"> <li id="col1">Sunday</li> <li id="col2">Monday</li> <li id="col3">Tuesday</li> <li id="col3">Wednesday</li> </ul> <button onclick="doIt()">Create New</button> <script> function doIt() { var newNode=document.createElement("LI"); var txt=document.createTextNode("Thursday"); newNode.appendChild(txt); document.getElementById("days").appendChild(newNode); } </script> </body> </html>
run this source code Browser View

Days:

  • Sunday
  • Monday
  • Tuesday
  • Wednesday


Above JavaScript program first create an LI node, then it crate a textnode for displaying text and then it append the text node to new LI element and finally the new node is append to the existing "days".

insertBefore(element, targetNode)

The Node.insertBefore() method inserts a node before the reference node as a child of a specified parent node. If the given child is a reference to an existing node in the document, insertBefore() moves it from its current position to the new position.
<!DOCTYPE html> <html> <body> <p>Days:</p> <ul id="days"> <li id="col2">Monday</li> <li id="col3">Tuesday</li> <li id="col3">Wednesday</li> </ul> <button onclick="doIt()">insertBefore</button> <script> function doIt() { var newItem = document.createElement("LI"); var textnode = document.createTextNode("Sunday"); newItem.appendChild(textnode); var list = document.getElementById("days"); list.insertBefore(newItem, list.childNodes[0]); } </script> </body> </html>
run this source code Browser View

Days:

  • Monday
  • Tuesday
  • Wednesday


appendChild(element)

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position.
<!DOCTYPE html> <html> <body> <p>Days:</p> <ul id="days"> <li id="col2">Sunday</li> <li id="col2">Monday</li> <li id="col3">Tuesday</li> <li id="col3">Wednesday</li> </ul> <button onclick="doIt()">appendChild</button> <script> function doIt() { var node = document.createElement("LI"); var textnode = document.createTextNode("Thursday"); node.appendChild(textnode); document.getElementById("days").appendChild(node); } </script> </body> </html>
run this source code Browser View

Days:

  • Sunday
  • Monday
  • Tuesday
  • Wednesday


Modifying Node

You can modify existing elements in the DOM by changing their properties, content, style or even moving them completely from one place in the DOM to another.

Modify content

The Element property innerHTML is used to get or set a string representing serialized HTML describing the element's descendants. It does not return any HTML markup . When set the content with this method, it will erases all content within the node and inserts the supplied text.
<!DOCTYPE html> <html> <body> <p id="heading">This will Change....</p> <button onclick="doIt()">Modify Above Text</button> <script> function doIt() { var txt = document.getElementById('heading').innerHTML; alert(txt); document.getElementById('heading').innerHTML = "Its Changed....."; } </script> </body> </html>
run this source code Browser View

This will Change....

Modifying Styles

The HTMLElement.style property is used to get as well as set the inline style of an element. While getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.
<!DOCTYPE html> <html> <body> <h1 id="heading">This will change to red...<h1> <button onclick="doIt()">Modify Above Text</button> <script> function doIt() { var txt = document.getElementById('heading').style.color="red"; } </script> </body> </html>
run this source code Browser View

This will change to red...

Removing Nodes

Similar to modifying DOM , it also allows us to delete the target nodes. The removeChild() method delete the targetnode from the parent node.
<!DOCTYPE html> <html> <body> <p>Days:</p> <ul id="days"> <li id="col2">Sunday</li> <li id="col2">Monday</li> <li id="col3">Tuesday</li> <li id="col3">Wednesday</li> </ul> <button onclick="doIt()">Remove</button> <script> function doIt() { var list = document.getElementById("days"); list.removeChild(list.childNodes[0]); } </script> </body> </html>
run this source code Browser View

Days:

  • Sunday
  • Monday
  • Tuesday
  • Wednesday