next → ← prev

The textContent in Javascript

The JavaScript textContent property works to set and get the page's text content. It is used to pass and display the text content of some information, tags, and large size of data and its nodes. The TextContent varies from the nodeValue of the script tag and returns content from child nodes of the multiple data types.

If the node is a text node, a processing instruction, or a tag remark, then javascript textContent gets or sets the text. The TextContent shows the concatenation of the textContent of each child node. It shows the processing instructions and comments to the other node types.

Syntax

There are two syntaxes available for the JavaScript text content. The first syntax uses to set the text of a node, and the second syntax uses to retrieve the node's text.

Syntax 1:

The following syntax uses to set the node's text using textual content.

Syntax 2:

The following syntax uses textual content to get the node's text.

Return Value:

A string contains the text of the output node and its children node. The output shows a null value if an element is a document or document type.
The child nodes are replaced by a single Text node using the set of the textContent attribute. The attribute has a specific string as its content.

Examples

The following examples show the set and get the various type of information using the textContent attribute.

Example 1

The following example uses text content in the javascript to set the information. The node data shows the text of the tags.

<!DOCTYPE html>
<html>
<head>
<title>
textContent in JavaScript using node
</title>
</head>
<body>
<h3>
textContent in JavaScript using node
</h3>
<h4> Set node information for child javascript nodes</h4>
<div id = "textContent_information"></div>
<button onclick = "display();"> Click Here! </button>
<script>
function display() {
var ele = document.getElementById("textContent_information");
ele.textContent = "<h1> textContent </h1><i> JavaScript </i><h2> Set or get the content of node </h2>";
}
</script>
</body>
</html>

Output

The following image shows the set the data using the content node.

The textContent in Javascript

Example 2

The following example uses text content in the javascript to get the information. We can get the value of the click function's button.

<!DOCTYPE html>
<html>
<head>
<title>
textContent in JavaScript using node
</title>
</head>
<body>
<h3> textContent in JavaScript using node </h3>
<h4> Get node information for child javascript nodes </h4>
  <textarea id = "myData1" value="">Get node information for child javascript nodes</textarea> <br>
<button id = "value" onclick = "fdisplay();"> Click the Button!</button>
<div id = "textContent_information"></div>
<script>
var text_in = document.getElementById("myData1").textContent;
function fdisplay() {
document.getElementById("textContent_information").textContent = text_in;
}
</script>
</body>
</html>

Output

The following image shows the set the data using the content node.

The textContent in Javascript

Example 3

The following example uses text content in the javascript to get the information. We can get the value of the click function's button.

<!DOCTYPE html>
<html>
<head>
<title>
textContent in JavaScript using node
</title>
</head>
<body>
<h3> textContent in JavaScript using node </h3>
<h4> Set node information for child javascript nodes </h4>
<button id = "value" onclick = "fdisplay();"> Click the Button! </button>
<div id = "textContent_information"></div>
<script>
function fdisplay() {
var text_in = document.getElementById("value").textContent;
document.getElementById("textContent_information").textContent = text_in;
}
</script>
</body>
</html>

Output

The following image shows the set the data using the content node.

The textContent in Javascript

Example4

The following example uses text content on the button value to get and set the information. We can get the value after clicking the button.

<!DOCTYPE html>
<html>
<head>
<title>
textContent in JavaScript using node
</title>
</head>
<body>
<h3>
textContent in JavaScript using node
</h3>
<p id = "info"> Get node information for child javascript nodes </p>
<button id = "value" onclick = "fdisplay();">  Click the Button! </button><br>
<button id = "values">  See the value! </button>
<script>
function fdisplay() {
document.getElementById("value").textContent = "the information of the node has been changed using click function!";
var text_in = document.getElementById("info").textContent;
document.getElementById("values").textContent = text_in;
}
</script>
</body>
</html>

Output

The following image shows the set the data using the content node.

The textContent in Javascript

Example5

The following example uses to get and set the information using innerHtml, innerText, and text content on the button value. We can get the difference in the output data after clicking the button.

<!DOCTYPE html>
<html>
<head>
<title>
textContent in JavaScript using node
</title>
</head>
<body>
<h3>
The textContent in JavaScript using node
</h3>
<p> Get node information for child javascript nodes </p>
<button id = "value" onclick = "fdisplay();">  Click the innerHtml Button! </button>
<button id = "value" onclick = "sdisplay();">  Click the innerText Button! </button>
<button id = "value" onclick = "tdisplay();">  Click the textcontent Button! </button>
<div id = "finfo"></div>
<div id = "sinfo"></div>
<div id = "tinfo"></div>
<script>
function fdisplay() {
document.getElementById("finfo").innerHTML = "<b> textContent     in JavaScript using node </b> the information of the node has been changed using click function!";
}
function sdisplay() {
document.getElementById("sinfo").innerText = "<b> textContent    in JavaScript using node </b> <br> the information of the node has been changed using click function!";
}
function tdisplay() {
document.getElementById("tinfo").textContent = "<b> textContent    in JavaScript using node </b> <br> textContent in JavaScript using node <br> the information of the node has been changed using click function!";
}
</script>
</body>
</html>

Output

The following image shows the set the data using the content node.

The textContent in Javascript

Example 6

The following example uses to get the list data and set the information using text content on the onclick button value. We can get the data of the list and other tags information.

<!DOCTYPE html>
<html>
<head>
<title>
textContent in JavaScript using node
</title>
</head>
<body>
<h3>
The textContent in JavaScript using node
</h3>
<p> Get node information for child javascript nodes </p>
<ul id="students">
<li id="std1">David</li>
<li id="std2">Sai</li>
<li id="std3">Ruta</li>
<li id="std4">Saniya</li>
<li id="std5">Kevin</li>
</ul>
<button id = "value" onclick = "tdisplay();">  Click the textcontent Button! </button>
<div id = "tinfo"></div>
<script>
function tdisplay() {
var students = document.getElementById("students").textContent;
document.getElementById("tinfo").textContent = students;
}
</script>
</body>
</html>

Output

The following image shows the set the data using the content node.

The textContent in Javascript

Example 7

The text content does not support empty data if information or string is empty. It shows the empty string as a value.

<!DOCTYPE html>
<html>
<head>
<title>
textContent in JavaScript using node
</title>
</head>
<body>
<h3>
The textContent in JavaScript using node
</h3>
<p> Get node information for child javascript nodes </p>
<ul id="students">
</ul>
<button id = "value" onclick = "tdisplay();">  Click the textcontent Button! </button>
<div id = "tinfo"></div>
<script>
function tdisplay() {
var students = document.getElementById("students").textContent;
console.log(students);
if(students != ''){
document.getElementById("tinfo").textContent = "child node does not available of the student parent node.";
}else{
document.getElementById("tinfo").textContent = "child node is available of the student parent node.";
}
}
</script>
</body>
</html>

Output

The following image shows the get the data using text content node.

The textContent in Javascript

Key Point of the text content in javascript

When javascript information automatically removes HTML, then utilization of textContent is secure.
The text content and information include the spaces and the inner element tags. The innerHTML attribute will return it.
The innerText attribute returns only text without any spaces or inner element tags. The textContent property returns text that includes spaces but excludes inner element tags.
The values of all the text nodes in the subtree are combined and set for text content and get from the text content. If a node doesn't have any children, the string is empty.
The innerText returns text which is humanly readable and takes into any CSS. The text content is difficult to read when html tags are used in the data.
When a property is set on a node, all its children are removed, and a single text node takes its place with the specified value.

Conclusion

The text content displays multiple types of information. The html tag required information and list data shown using a single method.

Next TopicJavaScript Throttling

← prev next →

Latest Courses

Data-Structures

Cloud-Computing

Ethical-Hacking

We provides tutorials and interview questions of all technology like java tutorial, android, java frameworks

Contact info

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

[email protected].

Follow us

Tutorials

Java Data Structures C Programming C++ Tutorial C# Tutorial PHP Tutorial HTML Tutorial JavaScript Tutorial jQuery Tutorial Spring Tutorial

Interview Questions

Tcs Intuit Wipro Adobe Infosys Amazon Accenture Cognizant Capgemini Microsoft

Online Compiler

C R C++ Php Java Html Swift Python JavaScript TypeScript

© Copyright 2024 Javatpoint. All Rights Reserved.