In this second part of DOM and DOM manipulation with javascript we are going to focus on creating, adding and removing content on the web page using DOM. I will recommend you to read the first part here.
Now , You have an understing of what DOM is , and how to select element from the page , those knowledge will be helpful in this part, without not wasting time let's understand some document methods that should help us to create ,add and remove content to the page.
I. Create new content
I.1 createElement() method
createElement() is a document interface method that creates a new HTMLElement passed as argument.
document.createElement("p") // to create a paragraph element
document.createElement("div") // to create a div element.
I.2. createTextNode method
Just like you can create a new element with the createElement() method, you can also create a new text node using the createTextNode() method.
const newText = document.createTextNode('I am the text for the paragraph!');
II Add content to the page
The createElement method , creates an element however , this element is only in our javascript code and not on the page yet.
To add a new element to the page we can use the Node.appendChild() method or the Element.append() method.
II.1. Node.appendChild() method
<!DOCTYPE html>
<html lang="en">
...
<body>
<h1 id="title">Home page title</h1>
<div class="container">
</div>
<script src="./index.js"></script>
</body>
</html>
const container = document.querySelector(".container"); // to select the container div
const newPara = document.createElement("p"); // to create a paragraph element
container.appendChild(newPara); // to add a paragraph in the container div
Notes
appendChild()method add the element at the end of the "parent selected", it means , the element added withappendChild()method will be the last child of the selected parent.appendChild()method must always be called on an existing element.
const newPara = document.createElement("p"); // to create a paragraph element
document.appendChild(newPara) // this will throw an error
II.2 Element.append() method
The append() method inserts a set of Node objects or DOMString (text) after the last child.
const container = document.querySelector(".container"); // to select the container div
const newPara = document.createElement("p"); // to create a paragraph element
// case 1: append a node
container.append(newPara); // to add a paragraph in the container div , this looks like <div><p></p></div>
//case 2: append a DOMString
container.append("this is a text in container") // the div will look like <div>this is a text in container</div>
//case 3: append multiple nodes or DOMString.
const secondPara = document.createElement("p");
const thirdPara = document.createElement("p");
const form = document.createElement("form");
container.append(secondPara, thirdPara, form, "this is a text in container");
Element.append() vs Node.appendChild()
Element.append()allows us to add DOMString, whileNode.appendChild()only acceptsNodeobjects.Element.append()has no returned value, whileNode.appendChild()returns the appendedNodeobjectElement.append()can append several nodes and strings, whileNode.appendChild()can only append one node
II.3 insertAdjacentHTML() method
From previous methods , we've seen that , they always add a new element or content at the end of the selected parent.
However we can also want to add new content in other location, in , before or after the selected parent.
To do that, the insertAdjacentHTML() get in game 🔥️. The insertAdjacentHTML() requires two arguments :
- The location of the HTML text we want to add.
- The HTML text.
Different Locations of insertAdjecentHTML are the following:
-
beforebegin: inserts the HTML text before the selected parent -
afterbegin: inserts the HTML text as the first child in the selected parent -
beforeend: inserts the HTML text as the last child in the selected parent -
afterend: inserts the HTML text after the selected parent.
<!-- beforebegin -->
<p class="container">
<!-- afterbegin -->
Existing text/HTML content
<!-- beforeend -->
</p>
<!-- afterend -->
const container = document.querySelector(".container");
container.insertAdjacentHTML('afterend', "<p>HTML text after the continer</p>");
III. Remove content
To remove content to the page , we will use the following methods.
III.1. removeChild() method
The removeChild() method removes a child node from the DOM and returns the removed node.
III.1.1 syntax
<parent-element>.removeChild(<child-to-remove>);
<div id="parent">
<div id="child"></div>
</div>
const parent = document.getElementById("parent");
const child = document.getElementById("child");
const throwAwayNode = parent.removeChild(child);
Notes
The
removeChild()method can return aNotFoundErrorif thechildnode is not a child of theparentnode.
III.2. remove() method
The remove() method removes the element from the DOM. It's the easiest way to remove an element from the DOM and it does not return any value.
<div id="parent">
<div id="child"></div>
</div>
const child = document.getElementById("child");
const parent = document.getElementById("parent");
child.remove(); // to remove the child element
// or
parent.remove(); // to remove the whole parent
Conclusion
Thanks for reading this article , if there is any term that you need me to shed more light on , just add it in the comment or reach out to me on twitter, or linkedIn.
Top comments (2)
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍
Thank you