Author
The Document Object Model (DOM) represents every part of an HTML document — elements, attributes, and text — as nodes. With JavaScript, we can create, insert, modify, and remove these nodes dynamically to make our webpages interactive and data-driven.
In the DOM, everything is a node:
| Node Type | Example | Description |
|---|---|---|
| Document Node | document |
Represents the entire webpage. |
| Element Node | <div>, <p>, <button> |
Represents HTML elements. |
| Text Node | "Hello World" |
Represents text inside elements. |
| Attribute Node | id="title" |
Represents attributes of elements. |
| Comment Node | <!-- Comment --> |
Represents comments in HTML. |
You can dynamically create elements and text nodes using JavaScript. This is the first step before adding new content to your webpage.
a. document.createElement(tagName)
Creates a new HTML element.
const newDiv = document.createElement("div");
b. document.createTextNode(text)
Creates a text node.
const textNode = document.createTextNode("Hello DOM!");
c. Combine Both
Attach text inside an element before inserting it.
const newPara = document.createElement("p");
const text = document.createTextNode("This is a paragraph created by JS.");
newPara.appendChild(text);
Now newPara becomes:
<p>This is a paragraph created by JS.</p>
Once a node is created, it must be added (inserted) into the DOM tree.
There are multiple ways to do this:
a. appendChild(node)
Adds a node as the last child of a parent element.
const div = document.getElementById("container");
div.appendChild(newPara); // Adds <p> inside <div id="container">
<div id="container">
<p>This is a paragraph created by JS.</p>
</div>
b. prepend(node)
Adds a node as the first child (before all others).
const heading = document.createElement("h2");
heading.textContent = "Welcome!";
div.prepend(heading);
<div id="container">
<h2>Welcome!</h2>
<p>This is a paragraph created by JS.</p>
</div>
c. insertBefore(newNode, existingNode)
Inserts a node before a specific child node.
const newItem = document.createElement("li");
newItem.textContent = "First item";
const list = document.getElementById("myList");
list.insertBefore(newItem, list.firstChild);
d. append()
A modern method that can append multiple nodes or text together.
div.append("Extra text ", newPara);
You can delete or replace elements dynamically.
a. removeChild(node)
Removes a specific child element from its parent.
const list = document.getElementById("myList");
const lastItem = list.lastElementChild;
list.removeChild(lastItem); // Deletes last <li>
b. element.remove()
Removes an element directly — no parent reference needed.
document.getElementById("myDiv").remove();
c. replaceChild(newNode, oldNode)
Replaces an old element with a new one.
const oldPara = document.getElementById("old");
const newPara = document.createElement("p");
newPara.textContent = "Replaced content!";
oldPara.parentNode.replaceChild(newPara, oldPara);
Sometimes you may need to duplicate an existing node.
const clone = newPara.cloneNode(true); // true → deep clone (includes children)
document.body.appendChild(clone);
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>
<script>
const content = document.getElementById("content");
// Create new elements
const heading = document.createElement("h2");
heading.textContent = "Dynamic DOM Example";
const para = document.createElement("p");
para.textContent = "This paragraph was created and added by JavaScript!";
// Append elements
content.appendChild(heading);
content.appendChild(para);
// Replace heading after 2 seconds
setTimeout(() => {
const newHeading = document.createElement("h2");
newHeading.textContent = "Updated DOM Heading";
content.replaceChild(newHeading, heading);
}, 2000);
// Remove paragraph after 4 seconds
setTimeout(() => {
para.remove();
}, 4000);
</script>
</body>
</html>