Javascript add text to div

Question

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.

Table of Contents Show

Steps to follow
Return value
Appending an element
Appending text
Appending an element and text
The append method is unscopable
Specifications
Browser compatibility
How do you append text in JavaScript?
How do you add an element to a div?
How do I change the content of a div?
Can I use innerHTML?

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

Specification
DOM Standard # ref-for-dom-parentnode-append①

Browser compatibility

BCD tables only load in the browser

Javascript add text to div

Steps to follow

Example

Output

Syntax

Parameters

Return value

Exceptions

Examples

Appending an element

Appending text

Appending an element and text

The append method is unscopable

Specifications

Browser compatibility

See also

How do you append text in JavaScript?

How do you add an element to a div?

How do I change the content of a div?

Can I use innerHTML?

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social