How To Add A New Element To HTML DOM In JavaScript?

Home » Add Element Dom Js » How To Add A New Element To HTML DOM In JavaScript?

Maybe your like

  • Home
  • Whiteboard
  • Online Compilers
  • Practice
  • Articles
  • AI Assistant
  • Jobs
  • Tools
  • Corporate Training
  • Courses
  • Certifications
Menu Categories Login
  • Switch theme
  • SQL
  • HTML
  • CSS
  • Javascript
  • Python
  • Java
  • C
  • C++
  • PHP
  • Scala
  • C#
  • Tailwind CSS
  • Node.js
  • MySQL
  • MongoDB
  • PL/SQL
  • Swift
  • Bootstrap
  • R
  • Machine Learning
  • Blockchain
  • Angular
  • React Native
  • Computer Fundamentals
  • Compiler Design
  • Operating System
  • Data Structure and Algorithms
  • Computer Network
  • DBMS
  • Excel
Technical Questions and Answers
  • Data Structure Data Structure
  • Networking Networking
  • RDBMS RDBMS
  • Operating System Operating System
  • Java Java
  • MS Excel MS Excel
  • iOS iOS
  • HTML HTML
  • CSS CSS
  • Android Android
  • Python Python
  • C Programming C Programming
  • C++ C++
  • C# C#
  • MongoDB MongoDB
  • MySQL MySQL
  • Javascript Javascript
  • PHP PHP
  • Selected Reading
  • UPSC IAS Exams Notes
  • Developer's Best Practices
  • Questions and Answers
  • Effective Resume Writing
  • HR Interview Questions
  • Computer Glossary
  • Who is Who
How to add a new element to HTML DOM in JavaScript? JavascriptWeb DevelopmentFront End Technology

In this article we are going to discuss how to add a new element to HTML DOM in JavaScript.

The Document object provides a method createElement() to create an element and appendChild() method to add it to the HTML DOM. Following are the steps involved in creating HTML DOM ?

Step 1 ? To insert an element into HTML DOM, firstly, we need to create an element and append to HTML DOM. The document.createElement() is used to create the HTML element. The syntax to create an element is shown below.

document.createElement(tagName[, options]);

Where,

  • tagName is the name of the tag to be created. The tag is of <p> type.

  • options param is an optional element object.

Step 2 ? After creation of a tag, we need to create a text to assign to the tag. The syntax to create a text node is shown below.

Document.createTextNode("String");

Step 3 ? After creating the text, we need to add the text to the element <p> type and thus finally adding to the div tag. The syntax to append the element to a tag is shown below.

appendChild(parameter);

Example 1

In the following example, initially the div section consists of only 2 texts. But later on, one more text is created and added to the div section as shown in the output.

<html> <body> <div id="new"> <p id="p1">Tutorix</p> <p id="p2">Tutorialspoint</p> </div> <script> var tag = document.createElement("p"); var text = document.createTextNode("Tutorix is the best e-learning platform"); tag.appendChild(text); var element = document.getElementById("new"); element.appendChild(tag); </script> </body> </html>

On executing the above code, the following output is generated.

Example 2

The following is an example program on how to add an element to HTML DOM.

<!DOCTYPE html> <html> <body> <h2>JavaScript HTML DOM</h2> <p>How to add a new element to HTML DOM</p> <div id="div1"> <p id="p1">Introduction.</p> <p id="p2">Conclusion.</p> </div> <script> const para = document.createElement("p"); const node = document.createTextNode("The end."); para.appendChild(node); const element = document.getElementById("div1"); const child = document.getElementById("p2"); element.appendChild(para,child); </script> </body> </html>

On executing the above code, the following output is generated.

Example 3

The following is an example program on how to add an element to HTML DOM. Here, the insertBefore() method is used instead of append method to add the element to the div tag.

<!DOCTYPE html> <html> <body> <h2>JavaScript HTML DOM</h2> <p>How to add a new element to HTML DOM</p> <div id="div1"> <p id="p1">Introduction.</p> <p id="p2">Conclusion.</p> </div> <script> const para = document.createElement("p"); const node = document.createTextNode("To begin with..."); para.appendChild(node); const element = document.getElementById("div1"); const child = document.getElementById("p2"); element.insertBefore(para,child); </script> </body> </html>

On executing the above code, the following output is generated.

Lokesh Yadav Lokesh Yadav Updated on: 2023-09-02T02:08:51+05:30

74K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started Print Page Previous Next Advertisements

Tag » Add Element Dom Js