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>
Browser ViewDays:
- Sunday
- Monday
- Tuesday
- Wednesday
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>
Browser ViewDays:
- 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>
Browser ViewDays:
- 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>
Browser ViewThis 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>
Browser ViewThis 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>
Browser ViewDays:
- Sunday
- Monday
- Tuesday
- Wednesday
Related Topics