DOM Manipulation

Adding New Elements to DOM

You can create new element in an HTML document, using the document.createElement() method. This method creates a new element, but it doesn’t add it to the DOM.

To add the new element at the end of any other children of a specified parent node use the appendChild() method.

However, if you want to add the new element at the beginning of any other children you can use the insertBefore() method.

To create a text string use createTextNode().

Example
<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>

// Creating a new div element 
var newDiv = document.createElement("div");

// Creating a text node
var newContent = document.createTextNode("Hi, how are you doing?");

// Adding the text node to the newly created div
newDiv.appendChild(newContent);

// Adding the newly created element and its content into the DOM
document.body.appendChild(newDiv);

// Adding the newly created element and its content into the DOM 
var currentDiv = document.getElementById("main"); 
document.body.insertBefore(newDiv, currentDiv);

Getting or Setting HTML Contents to DOM

You can also get or set the contents of the HTML elements easily with the innerHTML property. This property sets or gets the HTML markup contained within the element i.e. content between its opening and closing tags.

Example
// Getting inner HTML conents
var contents = document.getElementById("main").innerHTML;
console.log(contents);
 
// Prints: <h1 id="title">My Heading</h1>
           <p id="hint">This is some text.</p>

// Setting inner HTML contents
var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";

But there is one problem, the innerHTML property replaces all existing content of an element. So if you want to insert the HTML into the document without replacing the existing contents of an element, you can use the insertAdjacentHTML() method.

This method accepts two parameters: the position in which to insert and the HTML text to insert. The position must be one of the following values: "beforebegin", "afterbegin", "beforeend", and "afterend".

Example
<!-- beforebegin -->
<div id="main">
    <!-- afterbegin -->
    <h1 id="title">Hello World!</h1>
    <!-- beforeend -->
</div>
<!-- afterend -->

// Selecting target element
var mainDiv = document.getElementById("main");
 
// Inserting HTML just before the element itself, as a previous sibling
mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph one.</p>');
 
// Inserting HTML just inside the element, before its first child
mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph two.</p>');

The innerText property sets or returns the text content of the specified node.

If you set the innerText property, any child nodes are removed and replaced by a single Text node containing the specified string.

The textContent property is same as innerText property, but the difference is textContent property returns text with spaces where as innerText returns text with out spaces.

Example
var contents = document.getElementById("title");
// setting text 
contents.innerText = "Anna";
// getting text
var text = document.getElementById("main").innerText;

Removing Existing Elements from DOM

We can use the removeChild() method to remove a child node from the DOM.

Example
var parentElem = document.getElementById("main");
var childElem = document.getElementById("hint");
parentElem.removeChild(childElem);

Replacing Existing Elements in DOM

We can also replace an element in HTML DOM with another using the replaceChild() method. This method accepts two parameters: the node to insert and the node to be replaced. It has the syntax like parentNode.replaceChild(newChild, oldChild).

Example
var parentElem = document.getElementById("main");
var oldPara = document.getElementById("hint");
 
// Creating new elememt
var newPara = document.createElement("p");
var newContent = document.createTextNode("This is a new paragraph.");
newPara.appendChild(newContent);
 
// Replacing old paragraph with newly created paragraph
parentElem.replaceChild(newPara, oldPara);