The textContent property in JavaScript is utilized to both retrieve and assign the textual content of a webpage. It serves the purpose of conveying and presenting the text associated with various elements, tags, and extensive amounts of data along with their respective nodes. Unlike the nodeValue of the script tag, textContent returns the content derived from the child nodes of diverse data types.
When the node in question is identified as a text node, a processing instruction, or a comment node, the JavaScript property textContent can be utilized to either retrieve or assign the text. The textContent property represents the combined text derived from the textContent of all child nodes. Additionally, it reflects the processing instructions and comments pertaining to other types of nodes.
Syntax
JavaScript offers two distinct syntactical approaches for handling text content within nodes. The initial syntax is employed to assign text to a node, while the subsequent syntax is utilized to obtain the text from that node.
Syntax 1:
The syntax provided is utilized to assign textual content to the node's text property.
Node_element.textContent = information;
Syntax 2:
The syntax presented below utilizes string content to retrieve the text associated with the node.
Node_element.textContent;
Return Value:
- A string encompasses the content of the output node along with its child nodes. If an element is identified as a document or document type, the output will indicate a null value.
- The child nodes are substituted with a single Text node through the utilization of the textContent attribute. This attribute is assigned a specific string as its value.
Examples
The subsequent examples demonstrate how to set and retrieve different types of information by utilizing the textContent property.
Example 1
The subsequent illustration employs textual content within JavaScript to establish the information. The node data displays the text associated with 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 image below illustrates how to configure the data utilizing the content node.
Example 2
The subsequent example demonstrates the utilization of textual data within JavaScript to retrieve information. We can extract the value associated with the button within the click function.
<!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 image below illustrates the data configuration utilizing the content node.
Example 3
The subsequent example demonstrates the utilization of textual content within JavaScript to retrieve information. We can obtain the value associated with the button in the click function.
<!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 image below illustrates the dataset that has been established utilizing the content node.
Example4
The subsequent illustration employs the textual content of the button's value to retrieve and assign information. We can acquire the value subsequent to 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 image below illustrates the dataset configured through the content node.
Example5
The subsequent example demonstrates how to retrieve and modify information utilizing innerHTML, innerText, and textContent on the button's value. By clicking the button, we can observe the variations in the resulting data.
<!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 image below illustrates the arrangement of the data utilizing the content node.
Example 6
The subsequent example demonstrates how to retrieve list data and update the information by utilizing the text content from the value associated with the onclick button. This approach allows us to access the data contained within the list as well as information from other tags.
<!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 subsequent image illustrates the dataset by utilizing the content node.
Example 7
The text content does not accommodate empty data; if the information or string is devoid of content, it displays the empty string as its 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 image below illustrates how to retrieve data utilizing the text content node.
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 textual content presents various categories of information. The required details associated with the HTML tag and the list data are illustrated through a unified approach.