Welcome to another tutorial, here you will learn to manipulate elements in JavaScript.
Already you've learned how to select and style HTML DOM elements. In this tutorial, you will learn how to add/remove DOM elements dynamically, get their contents, etc.
In an HTML document, you can explicitly create a new element using the document.createElement() method. The document.createElement() method creates a new element, however, it doesn't add it to the DOM. But, you can do it in a separate step, as shown below:
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// 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
var currentDiv = document.getElementById("main");
document.body.appendChild(newDiv, currentDiv);
</script>
appendChild() method adds the new element at the end of any other children of a specified parent node. However, if you want to add the new element at the beginning of any other children you can use the insertBefore() method, as shown in the example below:
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// 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
var currentDiv = document.getElementById("main");
document.body.insertBefore(newDiv, currentDiv);
</script>To add a new element at the end of any other children of a specified parent node you will use the appendChild() method.
Also, the innerHTML property can be used to get or set the contents of the HTML elements easily. This property gets or sets the HTML markup present within the element (i.e content between its opening and closing tags). This is illustrated in the example below, to see how it works.
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// Getting inner HTML conents
var contents = document.getElementById("main").innerHTML;
alert(contents); // Outputs inner html contents
// Setting inner HTML contents
var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";
</script>
The example clearly shows us how easily you can insert new elements into DOM using the innerHTML property, however, there is one problem, which is that the innerHTML property replaces all existing content of an element. Therefore, if you want to insert the HTML into the document you can use the insertAdjacentHTML() method and the existing contents of an element will not be replaced.
The insertAdjacentHTML() method accepts two parameters; the position in which to insert and the HTML text to insert. So, the position must take one of the following values: ‘beforebegin’, ‘afterbegin’, ‘beforeend’, and ‘afterend’. This method is supported in most major browsers.
The example illustrates the visualization of position names and how it works.
<!-- beforebegin -->
<div id="main">
<!-- afterbegin -->
<h1 id="title">Hello World!</h1>
<!-- beforeend -->
</div>
<!-- afterend -->
<script>
// 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>');
// Inserting HTML just inside the element, after its last child
mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph three.</p>');
// Inserting HTML just after the element itself, as a next sibling
mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');
</script>Note: The ‘beforebegin’ and ‘afterend’ positions work only if the node is in the Document Object Model tree and has a parent element. Also, when inserting HTML into a web page, be cautious so as not to use user input that hasn't been escaped, to prevent an XSS attack.
To remove a child node from the DOM you can use the removeChild() method. The removeChild() method also returns the removed node. Below is an example:
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
var parentElem = document.getElementById("main");
var childElem = document.getElementById("hint");
parentElem.removeChild(childElem);
</script>
It is also possible for you to remove the child element without knowing the parent element. You can do it by simply finding the child element and using the parentNode property to find its parent element, it then returns the parent of the specified node in the DOM tree. Here is an illustration;
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
var childElem = document.getElementById("hint");
childElem.parentNode.removeChild(childElem);
</script>
You can also use the replaceChild() method to replace an element in HTML DOM with another. The replaceChild() method accepts two parameters; the node to insert and the node to be replaced.
The method has the syntax like parentNode.replaceChild(newChild, oldChild);. Here's an illustration:
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
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);
</script>