Article Categories

Selected Reading

How to add a new element to HTML DOM in JavaScript?

Javascript Web Development Front End Technology

In JavaScript, adding new elements to the HTML DOM involves creating elements and inserting them into the document structure. This process requires understanding three key methods: createElement(), createTextNode(), and appendChild().

Core Methods for DOM Manipulation

The Document object provides essential methods for creating and adding elements to the DOM:

document.createElement(tagName) - Creates a new HTML element
document.createTextNode(text) - Creates a text node
appendChild(element) - Adds an element as the last child
insertBefore(newElement, referenceElement) - Inserts an element before a reference element

Syntax

// Create element
const element = document.createElement(tagName);

// Create text node
const textNode = document.createTextNode("text content");

// Append text to element
element.appendChild(textNode);

// Add element to DOM
parentElement.appendChild(element);

Step-by-Step Process

Step 1: Create the HTML element using createElement()

Step 2: Create text content using createTextNode()

Step 3: Attach text to the element using appendChild()

Step 4: Insert the complete element into the DOM

Example 1: Adding Element with appendChild()

This example demonstrates adding a new paragraph to an existing div container:

<html>
<body>
   <div id="container">
      <p id="p1">Tutorix</p>
      <p id="p2">Tutorialspoint</p>
   </div>
   <script>
      // Create new paragraph element
      const newParagraph = document.createElement("p");
      
      // Create text content
      const textContent = document.createTextNode("Tutorix is the best e-learning platform");
      
      // Add text to paragraph
      newParagraph.appendChild(textContent);
      
      // Get parent container and append new element
      const container = document.getElementById("container");
      container.appendChild(newParagraph);
      
      console.log("New element added successfully!");
   </script>
</body>
</html>

New element added successfully!

Example 2: Creating Multiple Elements

This example shows how to create and add multiple elements to the DOM:

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript HTML DOM</h2>
   <p>Adding multiple elements to HTML DOM</p>
   <div id="content">
      <p id="intro">Introduction.</p>
      <p id="conclusion">Conclusion.</p>
   </div>
   <script>
      // Create new paragraph
      const newPara = document.createElement("p");
      const textNode = document.createTextNode("The end.");
      newPara.appendChild(textNode);
      
      // Add to DOM
      const contentDiv = document.getElementById("content");
      contentDiv.appendChild(newPara);
      
      console.log("Element added at the end");
   </script>
</body>
</html>

Element added at the end

Example 3: Using insertBefore() Method

The insertBefore() method allows you to insert an element at a specific position:

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript HTML DOM</h2>
   <p>Inserting element before existing element</p>
   <div id="main">
      <p id="first">Introduction.</p>
      <p id="last">Conclusion.</p>
   </div>
   <script>
      // Create new element
      const middlePara = document.createElement("p");
      const middleText = document.createTextNode("To begin with...");
      middlePara.appendChild(middleText);
      
      // Insert before conclusion paragraph
      const mainDiv = document.getElementById("main");
      const conclusionPara = document.getElementById("last");
      mainDiv.insertBefore(middlePara, conclusionPara);
      
      console.log("Element inserted before conclusion");
   </script>
</body>
</html>

Element inserted before conclusion

Method Comparison

Method	Position	Use Case
`appendChild()`	End of parent	Adding elements at the bottom
`insertBefore()`	Before reference element	Inserting at specific positions

Best Practices

Always check if the parent element exists before appending
Use textContent property as an alternative to createTextNode()
Consider using innerHTML for simple HTML content
Use insertAdjacentHTML() for more complex insertion scenarios

Conclusion

Adding elements to the DOM requires creating elements with createElement(), adding content, and positioning them using appendChild() or insertBefore(). These methods provide full control over DOM manipulation in JavaScript.

Lokesh Yadav

Updated on: 2026-03-15T23:18:59+05:30

74K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next