DOM Nodes

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.

What is a DOM Node?

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.

Creating Nodes in DOM

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>

Appending (Adding) Nodes to the Document

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);

Removing Nodes from the DOM

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);

Cloning Nodes

Sometimes you may need to duplicate an existing node.

const clone = newPara.cloneNode(true); // true → deep clone (includes children)
document.body.appendChild(clone);

Practical Example

<!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>

JavaScript Handbook