
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to add a new element to HTML DOM in JavaScript?
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.
- Related Articles
- How to add an event handler to an element in JavaScript HTML DOM?
- How to add a class to DOM element in JavaScript?
- How to add many Event Handlers to the same element with JavaScript HTML DOM?
- How to add an element horizontally in HTML page using JavaScript?
- Add oninput attribute to HTML element with JavaScript?
- How to add a new element in the XML using PowerShell?
- How to add a new list element under a using jQuery?
- How to add an address element in HTML?
- How to add a new value to each element of list in R?
- How to add rows to a table using JavaScript DOM?
- How to add an element to a javascript object?
- Swift Program to Add a New Element in the Set
- How to add attributes to an HTML element in jQuery?
- Remove and add new HTML Tags with JavaScript?
- How to add two arrays into a new array in JavaScript?
