HTML Document Object Model (DOM) provides us with a series of methods to add and delete HTML Elements in the webpage using JavaScript.
In this lesson, we will learn about those methods. They are as follows:
- createElement() method
- element.appendChild() method
- element.remove() method
- element.removeChild() method
- document.write() method
Note: Also check out our JavaScript 👉 Find and Select DOM Elements and 👉 Change or Update Elements lesson.
The JavaScript createElement() method 🧙♂️
The createElement() method helps us to create a new HTML element in the DOM.
With the createElement() method, a new HTML element can be created, but to see it in our webpage, we need to add or append the newly created element inside our DOM. This is mainly done by using the appendChild() method.
Note: Don’t worry, we’ll learn about the appendChild() method in the lessons given below.
The createElement() method returns the created element as a DOM Object, or in other words, a Node.
Syntax
document.createElement(elementType)
Parameters
- elementType : It is required. It must contain the type of the element that we are creating.
Returns
- The created element as a DOM Object, or in other words, a Node.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Create Element</title>
</head>
<body>
<h2>Heading 1</h2>
<script>
// Create a new "h2" heading element.
let heading2 = document.createElement("h2");
//The "createElement()" method returns the created element as an object allowing us to utilize it's properties like "innerHTML", "innerText", etc.
// Setting it's inner text content to "Heading 2".
heading2.innerText = "Heading 2";
// We have to append or add this new heading inside our "<body>" tag where all our visible HTML content goes.
document.body.appendChild(heading2);
/** NOTE: DON'T WORRY, WE'LL LEARN ABOUT "appendChild()" METHOD IN DETAIL IN THE LESSONS BELOW. **/
console.log(heading2);
</script>
</body>
</html>
Output
Example 2
<!DOCTYPE html>
<html>
<head>
<title>Create Element</title>
</head>
<body>
<h2>Heading 1</h2>
<p id="para">Paragraph </p>
<script>
// Create a "button" element.
let button = document.createElement("button");
// Setting it's inner html content to "Click Me".
button.innerHTML = "Click Me";
// Setting the "type" attribute's value of the button to "submit".
button.setAttribute("type", "submit");
// Appending or Adding the new "button" element inside our "paragraph" element.
let paragraphEl = document.getElementById("para");
paragraphEl.appendChild(button);
console.log(button);
</script>
</body>
</html>
Output
The JavaScript element.appendChild() method 👶
The element.appendChild() method helps us to add or append a new HTML element as the last child element of the given selected element.
The element.appendChild() method returns the added last child element as a DOM Object, or in other words, a Node.
Syntax
element.appendChild(node)
Parameters
- node : It is required. It is the element or node that we are adding or appending as the last child.
Returns
- The added last child element as a DOM Object, or in other words, a Node.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Append Child</title>
</head>
<body>
<h2>Javascript</h2>
<script>
// Creating a new "<p>" element using "createElement()" method.
let paragraph = document.createElement("p");
// Setting it's inner text content.
paragraph.innerText = "Javascript is a high level programming language.";
// Appending or Adding this new "<p>" element inside our "<body>" tag where all our visible HTML content goes.
document.body.appendChild(paragraph);
// Inside our "<body>" element, we can now see that the newly added "<p>" element is at the very last, below every other element.
console.log(document.body);
</script>
</body>
</html>
Output
Example 2
<!DOCTYPE html>
<html>
<head>
<title>Append Child</title>
</head>
<body>
<h2>Programming Languages</h2>
<ul id="list">
<li>Javascript</li>
<li>Python</li>
</ul>
<script>
// Creating a new "<li>" element using "createElement()" method.
let listItem = document.createElement("li");
// Setting it's inner text content.
listItem.innerText = "C";
// Appending or Adding this new "<li>" element inside our "<ul>" element.
let list = document.getElementById("list");
list.appendChild(listItem);
// Inside our "<ul>" element, we can now see that the newly added "<li>" element is at the very last, below every other element.
console.log(list);
</script>
</body>
</html>
Output
The JavaScript element.remove() method 🗑
The element.remove() method helps us to remove or delete the selected HTML element from the DOM.
Note: After removing a parent element, all it’s child elements are also removed.
The element.remove() method does not return anything.
Syntax
element.remove()
Parameters
- Takes no parameters.
Returns
- Does not return anything.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Remove Element</title>
</head>
<body>
<h2 id="first-head">Javascript</h2>
<p>Javascript is a high level programming language.</p>
<h2>List of Operating Systems</h2>
<ul id="list">
<li>Windows</li>
<li>Mac OS</li>
<li>Linux</li>
</ul>
<script>
let firstHeading = document.getElementById("first-head");
// Removing the first heading.
firstHeading.remove();
let list = document.getElementById("list");
// Removing the entire list.
// NOTE: Here, removing the "<ul>" element removes all it's child elements too. i.e. All "<li>" elements are removed too.
list.remove();
// Displaying the remaining elements inside of our "<body>" element.
console.log(document.body);
</script>
</body>
</html>
Output
Example 2: Removing Elements after a certain time
<!DOCTYPE html>
<html>
<head>
<title>Remove Element</title>
</head>
<body>
<h2>List of Operating Systems</h2>
<ul id="list">
<li>Windows</li>
<li>Mac OS</li>
<li>Linux</li>
</ul>
<script>
let list = document.getElementById("list");
// Removing the entire list after 3 seconds.
setTimeout(() => {
list.remove();
// Displaying the remaining elements inside of our "<body>" element.
console.log(document.body);
}, 3000);
</script>
</body>
</html>
Output: Before 🤔
Output: After 3 seconds ⏲
The JavaScript element.removeChild() method ✂
The element.removeChild() method helps us to remove or delete the chosen child element from the selected HTML parent element.
The element.removeChild() method returns the removed child element as a DOM Object, or in other words, a Node.
Syntax
element.removeChild(node)
Parameters
- node : It is required. It is the child element or node that we are removing.
Returns
- The removed child element as a DOM Object, or in other words, a Node.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Remove Child Element</title>
</head>
<body>
<h2>Javascript</h2>
<div id="container" style="border: 1px solid green; padding: 6px">
<p id="description">Javascript is a high level programming language.</p>
<em>Created by Brendan Eich.</em>
</div>
<script>
let container = document.getElementById("container");
// Selecting the "<p>" element.
let description = document.getElementById("description");
// Removing the "<p>" element from our parent "div" element.
container.removeChild(description);
// Displaying the remaining elements inside of our "<body>" element.
console.log(document.body);
</script>
</body>
</html>
Output
Example 2
<!DOCTYPE html>
<html>
<head>
<title>Remove Child Element</title>
</head>
<body>
<h2>Programming Languages</h2>
<ul id="list">
<li>Javascript</li>
<li>Python</li>
<li>C</li>
</ul>
<script>
let list = document.getElementById("list");
// Let's view all the children of our parent "ul" element.
console.log(list.children);
// Removing the first child of our parent "ul" element. i.e. "Javascript" will be removed.
list.removeChild(list.children[0]);
// Displaying the remaining elements inside of our "<body>" element.
console.log(document.body);
</script>
</body>
</html>
Output
The JavaScript document.write() method ✏
The document.write() method helps us to write content into the DOM directly. The content can be anything: Text or HTML Elements.
The document.write() method writes content directly into the location where the method is called.
Syntax
document.write(expression1, expression2, ..., expressionN)
Parameters
- expression1 : It is required. It is the content that we are writing.
Returns
- Does not return anything.
Example 1: Writing Text Content 🔡
<!DOCTYPE html>
<html>
<head>
<title>Document Write</title>
</head>
<body>
<h2>I love programming.</h2>
<!-- Write a text content after this "<h2>" element. -->
<script>
document.write("Great! Keep going.");
</script>
</body>
</html>
Output
Example 2: Writing Text and HTML Content 🤯
<!DOCTYPE html>
<html>
<head>
<title>Document Write</title>
</head>
<body>
<h2>I love programming.</h2>
<!-- Write a text content after this "<h2>" element. -->
<script>
document.write("Great! Keep going.");
</script>
<h3>And I love Bitslord.</h3>
<!-- We can also write multiple HTML content. Here, we wrote two HTML elements: "<strong>" and "<em>" -->
<script>
document.write(
"<strong>And Bitslord loves you too!</strong> <em>Keep Going</em>"
);
</script>
</body>
</html>
Output
Example 3: Writing multiple content at once 😎
<!DOCTYPE html>
<html>
<head>
<title>Document Write</title>
</head>
<body>
<h2>Programming Languages.</h2>
<ul>
<!-- Write multiple content at once. -->
<script>
document.write("<li>Javascript</li>", "<li>Python</li>", "<li>C</li>");
</script>
</ul>
</body>
</html>
Output
In this way, we can add and delete elements or content into the DOM using JavaScript. There are many other methods given by the DOM that can accomplish these things but the methods given above are usually most used.