JavaScript Dom Manipulations - Javascript Tutorial

Dom Manipulations

The DOM (Document Object Model) represents a document as a hierarchical tree structure and each element in the document tree is called a Node in the DOM. 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 DOM has several methods and properties that you can access any element on the page, add new ones, modify or remove elements from the document.

Creating Nodes

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.

Syntax

document.createElement(tagName);

example

Red
Blue
Green

Full Source

<!DOCTYPE html>
<html>
<body>
<ul id="list">
	<li>Red</li>
	<li>Blue</li>
	<li>Green</li>
</ul>
<button onclick="doIt()">Create New</button>
<script>
function doIt()
{
	var newNode=document.createElement("LI");
	var txt=document.createTextNode("Yellow");
	newNode.appendChild(txt);
	document.getElementById("list").appendChild(newNode);
}
</script>
</body>
</html>

Above 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 "list".

appendChild(element):

The appendChild() method appends the DOM element as a child of parentNode, at the end of its existing child nodes.

insertBefore(element, targetNode):

The insertBefore() method inserts the DOM element as a child of parentNode and a sibling of targetNode just before it in the current document.

replaceChild(element, targetNode):

The replaceChild method replaces targetNode with element.

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 Node.innerHTML provides an interface to the HTML inside of a node. This method will sets or returns the inner HTML of an element. 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.

InnerHTML Text

Full Source

<!DOCTYPE html>
<html>
<body>
<p id="heading">InnerHTML Text</p>
<button onclick="doIt()">Modify Above Text</button>
<script>
function doIt()
{
	var txt = document.getElementById('heading').innerHTML;
	alert(txt);
	document.getElementById('heading').innerHTML = "New Heading Here";
}
</script>
</body>
</html>

Modifying Styles

You can change the style of an element in the DOM similar to change the content in the above example.

InnerHTML Text

Full Source

<!DOCTYPE html>
<html>
<body>
<h1 id="heading">InnerHTML Text<h1>
<button onclick="doIt()">Modify Above Text</button>
<script>
function doIt()
{
	var txt = document.getElementById('heading').style.color="red";
}
</script>
</body>
</html>

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.

Syntax

removeChild(element)

Red
Blue
Green

Full Source

<!DOCTYPE html>
<html>
<body>
<ul id="list"><li>Red</li><li>Blue</li><li>Green</li></ul>
<button onclick="doIt()">Remove</button>
<script>
function doIt()
{
	var rmList=document.getElementById("list");
	rmList.removeChild(rmList.childNodes[0]);
}
</script>
</body>
</html>