DOM manipulation in JavaScript

At the core of the Document Object Model (DOM) lies the principal entity known as the Document Object, encompassing a multitude of subordinate child objects. Within the DOM tree, every individual element present in the document is intricately represented. The document object, a native construct, boasts an extensive array of properties and methods that empower developers to effortlessly access and manipulate web content.

Create a DOM element

To facilitate the creation of new elements within the Document Object Model (DOM), a versatile method called createElement() is available. This method is designed to generate a generic DOM node of the specified type, requiring an HTML tag name as its argument. Upon invocation, createElement() efficiently produces the desired element, ready for integration into the DOM structure.

<!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 serves the purpose of inserting a node as a child before a reference node within a designated parent node. This method allows for seamless rearrangement of the DOM structure. In cases where the provided child node already exists within the document, insertBefore() intelligently relocates it from its current position to the newly specified position, ensuring smooth and efficient node manipulation.

<!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 is utilized to append a node to the end of the list of children within a specified parent node. This method seamlessly adds the node as the last child, ensuring proper ordering within the DOM structure. If the provided child node already exists within the document, appendChild() intelligently relocates it from its current position to the newly specified position, facilitating efficient node management and arrangement.

<!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

Existing elements in the Document Object Model (DOM) can undergo modifications by altering their properties, content, style, or even by relocating them within the DOM structure. Through these actions, elements can be dynamically customized and repositioned, enabling a seamless transformation of their appearance and behavior within the web page. Whether it involves updating specific properties, modifying content, applying new styles, or transferring elements to different locations within the DOM, the flexibility of the DOM empowers developers to achieve comprehensive control over the presentation and functionality of web elements.

Modify content

The innerHTML property of an Element is employed to retrieve or modify a string that represents the serialized HTML content of the element's descendants. It does not return any actual HTML markup as a result. When utilizing this property to set content, it is important to note that it replaces all existing content within the node with the supplied text or HTML. Therefore, caution must be exercised as the previous content will be erased, making way for the newly inserted content.

<!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 serves the dual purpose of retrieving and modifying the inline style of an element. When accessed, it returns a CSSStyleDeclaration object that encompasses a comprehensive collection of style properties associated with the element. This object includes assigned values for attributes defined within the element's inline style attribute. This allows developers to access and manipulate individual style properties programmatically, providing granular control over the visual presentation of the element.

<!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


Conclusion

DOM manipulation in JavaScript refers to the dynamic alteration of web page elements and content through scripting. This involves accessing, modifying, or creating new nodes within the DOM tree using methods and properties, enabling developers to enhance interactivity and customize the appearance and behavior of web pages programmatically.






Related Topics
  1. Javascript DOM Structure
  2. Accessing DOM Elements
  3. How To Traverse the DOM
  4. JavaScript DOM Events