To add a new element to the HTML DOM, we have to create it first and then we need to append it to the existing element.
Steps to follow
1) First, create a div section and add some text to it using <p> tags.
2) Create an element <p> using document.createElement("p").
3) Create a text, using document.createTextNode(), so as to insert it in the above-created element("p").
4) Using appendChild() try to append the created element, along with text, to the existing div tag.
Thus a new element is created(<p>) and appended to the existing element(<div>).
Example
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.
Live Demo
<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>Output
Tutorix Tutorialspoint Tutorix is the best e-learning platform
Updated on 30-Jul-2019 22:30:26
- Related Questions & Answers
- How to add a class to DOM element in JavaScript?
- How to add an event handler to an element in JavaScript HTML DOM?
- How to add many Event Handlers to the same element with JavaScript HTML DOM?
- Add oninput attribute to HTML element with JavaScript?
- How to add a new element in the XML using PowerShell?
- How to add a new value to each element of list in R?
- How to add an address element in HTML?
- How to add an element to a javascript object?
- Remove and add new HTML Tags with JavaScript?
- How to add rows to a table using JavaScript DOM?
- How to add two arrays into a new array in JavaScript?
- MongoDB query to add new array element in document
- How to add a unique id for an element in HTML?
- How to add new value to an existing array in JavaScript?
- How to add a new list element under a <ul> using jQuery?
The Element.append() method inserts a set of Node objects or string objects after the last child of the Element. String objects are inserted as equivalent Text nodes. Differences from
Node.appendChild():
- Element.append() allows you to also append string objects, whereas Node.appendChild() only accepts Node objects.
- Element.append() has no return value, whereas Node.appendChild() returns the appended Node object.
- Element.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.
Syntax
append(param1) append(param1, param2) append(param1, param2, /* … ,*/ paramN)
Parameters
param1, …, paramN
A set of Node or string objects to insert.
Return value
Exceptions
HierarchyRequestError DOMException
Thrown when the node cannot be inserted at the specified point in the hierarchy.
Examples
Appending an element
let div = document.createElement("div") let p = document.createElement("p") div.append(p) console.log(div.childNodes) // NodeList [ <p> ]
Appending text
let div = document.createElement("div") div.append("Some text") console.log(div.textContent) // "Some text"
Appending an element and text
let div = document.createElement("div") let p = document.createElement("p") div.append("Some text", p) console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]
The append method is unscopable
The append() method is not scoped into the with statement. See Symbol.unscopables for more information.
let div = document.createElement("div") with(div) { append("foo") } // ReferenceError: append is not defined
Specifications
DOM Standard # ref-for-dom-parentnode-append① |
Browser compatibility
BCD tables only load in the browser