Modifying The HTML Document

By using the JavaScript we can modify the any part of the HTML or the entire HTML page. Now the DOM modification is the key to making the page dynamic.

For the DOM modification JavaScript provides the several methods.

Create new HTML DOM elements

There is mainly two methods that are helpful to create a new HTML elements.

1. document.createElement(tagName)

By using the createElement() method we can create the any HTML tag.

Syntax:

var newDOM = document.createElement("tagName");

Example:

var newDOM = document.createElement("div");

In above example one new HTML DIV DOM node is created, and stored in the newDOM variable. Yes it so simple to create the new HTML DOM in the JavaScript.

2. document.createTextNode(“text”)

createTextNode() method is mainly used to create the text type element node, Which display the text in the browser.

By using the createTextNode() method we can create the text node, which will be displayed on the browser.

Syntax:

var textNode = document.createTextNode("text");

Example:

var textNode = document.createTextNode("Hello World!!!");

The createElement() method is the most commonly method is used to create DOM element, but the createTextNode() is also used more to create the text type nodes.

Creating text node using the createTextNode() method and appending it any other HTML DOM is much more faster than the innerHTML in most modern browser.

Adding elements

We can also add the one element into the another element.

For it we just have to call the methods of the it’s parent elements.

parentElement.appendChild(element)

• appendChild() is the method of the DOM element.
• It accept one element, which is child element.
• This method will add the new element into the parentElement DOM.

HTML:

<div id="parentDOM">
        <div id="Child1">Child1</div>
        <div id="Child2">Child2</div>
</div>

JS:

var parentDOM = document.getElementById("parentDOM");

var newElement = document.createElement("div");
newElement.innerHTML = "New Child";

parentDOM.appendChild(newElement);

Output:

<div id="parentDOM">
        <div id="Child1">Child1</div>
        <div id="Child2">Child2</div>
        <div>New Child</div>
</div>

So as you seen in above example, one new element is added into the parentDOM using the appendChild() method.

parentElem.insertBefore(element, nextSibling)

• insertBefore() is the method of the element node.
• It will add the element at the specific location, where we want.

It accept the two arguments,

1. element: This is the element which we want to add.
2. nextSibling: insertBefore() method will add the element before this (nextSibling) element.

HTML:

<div id="parentDOM">
    <div id="Child1">Child1</div>
    <div id="Child2">Child2</div>
</div>

JS:

var parentDOM = document.getElementById("parentDOM");

var nextSibling = document.getElementById("Child2");

var newElement = document.createElement("div");
newElement.innerHTML = "New Child";

parentDOM.insertBefore(newElement, nextSibling);

Output:

<div id="parentDOM">
    <div id="Child1">Child1</div>
    <div>New Child</div>
    <div id="Child2">Child2</div>
</div>

As you see in above example, new element is added before the Child2 element.

Remove Elements

As we can add the elements into the document, So we can also remove the elements from the document.

There are mainly two methods.

1. parentDOM.removeChild(element)

This method will remove the element from the parentDOM.

It will remove the element which we passed into the parameter.

HTML:

<div id="parentDOM">
        <div id="Child1">Child1</div>
        <div id="Child2">Child2</div>
</div>

JS:

var parentDOM = document.getElementById("parentDOM");

var childEle = document.getElementById("Child2");

parentDOM.removeChild(childEle);

Output:

<div id="parentDOM">
        <div id="Child1">Child1</div>
</div>

2. parentDOM.replaceChild(newElement, currentElement)

This method will replace the currentElement with the newElement.

HTML:

<div id="parentDOM">
        <div id="Child1">Child1</div>
        <div id="Child2">Child2</div>
</div>

JS:

var parentDOM = document.getElementById("parentDOM");

var currentElement = document.getElementById("Child2");

var newElement = document.createElement("div");
newElement.innerHTML = "New Child";

parentDOM.replaceChild(newElement, currentElement);

Output:

<div id="parentDOM">
        <div id="Child1">Child1</div>
        <div>New Child</div>
</div>

cloneNode()

Without repeating the same and lengthy process of the re-creating the same another DOM element with it’s child node, attributes and it’s property.

We can create the copy of another HTML DOM using the cloneNode() method.

cloneNode() method have the 2 versions.

cloneNode(true)

When we pass the true in the cloneNode() method, It will create the deep copy of the element, including the it’s child elements and it’s properties as well.

HTML:

<div id="parentDOM">
        <div id="Child1">Child1</div>
        <div id="Child2">New Child</div>
</div>

JS:

var parentDOM = document.getElementById("parentDOM");

var copyDOM = parentDOM.cloneNode(true);

document.body.appendChild(copyDOM);

Output:

<div id="parentDOM">
        <div id="Child1">Child1</div>
        <div id="Child2">New Child</div>
</div>
<div id="parentDOM">
        <div id="Child1">Child1</div>
        <div id="Child2">New Child</div>
</div>

So in above example, First I find the existing elements, after that I copy that element deeply using the cloneNode(true); method.

So it will copy the all properties and attributes and it’s child elements as well.

After that I added the copied elements into the body tag.

cloneNode(false)

cloneNode(false) method will not copy the it’s child elements. It will only copy the main element with it’s attributes only.

HTML:

<div id="parentDOM">
        <div id="Child1">Child1</div>
        <div id="Child2">New Child</div>
</div>

JS:

var parentDOM = document.getElementById("parentDOM");

var copyDOM = parentDOM.cloneNode(false);

document.body.appendChild(copyDOM);

Output:

<div id="parentDOM">
        <div id="Child1">Child1</div>
        <div id="Child2">New Child</div>
</div>
<div id="parentDOM">
</div>

So as you seen in above example, None of the child element of the parentDOM is copied. It only copy the main outer element with it’s attributes.