Textcontent in Javascript.

Many properties in JavaScript can be used to access and alter HTML information.

Text content, inner text, and inner HTML are a few examples of such qualities. These attributes each served a distinct purpose. Except for tags, the TextContent property returns all of the text that is present within a node, an element, and all of its descendants, including spaces and CSS hidden text. The InnerText property returns all text content, excluding the script and style tags, from an element, a node, and all of its descendant elements. While the inner HTML property, when applied to an element, only returns the text that is enclosed by the element and nothing else. The space is also disregarded.

This article will focus on discussing text content in Javascript. It will be centered on.

  • Textcontent in JavaScript
  • Basic Syntax
  • textContent property Return
  • How to Use textContent in JavaScript

Let’s get started.

Text content in Javascript

Textcontent is a property that controls how much text is displayed in an element, including that of its children. The nodeValue property and the textContent property are similar, however, the textContent property differs in that it returns material from child nodes.

If the node is a CDATA section, any processing instruction, comments, or a text node, textContent will return the node value, which is the text contained within the node. TextContent returns the concatenation of the textContent of each child node, ignoring processing instructions and comments, for some of the other node types. The textContent property is supported in Internet Explorer from version 9. In older Internet Explorer versions, use the innerText property for similar functionality.

There are other properties and methods in JavaScript that work similarly to the textContent property:

  • The outerText property is almost similar to the innerText property. They always return the same value for the same element, but when you set them, the innerText property replaces the content between the opening and closing tags of an element with the specified text, while the outerText property removes an element and inserts the specified text in place of it.

  • The innerHTML and outerHTML properties are similar to the innerText and outerText properties, but they set or return the HTML content of elements instead of the text content. The HTML content is the source code of an element, while the text content excludes the opening and closing tags from the source code.

  • To set or return the text of an option element, use the cross-browser text property.

  • To set or return the value of a text field (textarea or input:text), use the cross-browser value property.

  • If you need the path or the name of the file or files selected with an input:file element, use the cross-browser value property.

  • To set or return the text content of a CommentNode or TextNode, use the cross-browser data or nodeValue property.

  • Additionally, the insertAdjacentText method can also be used to insert text content into the document.

Basic Syntax:

element.textContent

Syntax of textContent in JavaScript

There are two syntaxes for textContent. The one to set the text of the node and the other to get the text of the node. node.textContent = text; // used to set text of node node.textContent; // used to return text of node

TextContent property Return

In JavaScript, the textContent property returns the content of an element/node and all of its descendents(child nodes). It returns null if the element/node is a document/notation type. If we set the textContent property, child nodes are removed and replaced by a single Text node that contains a specific string.

How to Use textContent property in JavaScript

The theoretical portion of the textContent attribute is now complete. Let's take it a step further and put all these theoretical ideas into practice. Example1: Consider the following code to see how the textContent property in JavaScript may be used to retrieve or return the text content of an element:

<html>
    <html>
        <head>
        <meta charset= "UTF-8">
        <title>Cities in countries</title>
        </head> 
<body>
    <h2 id="urban"> Nice is in France. </h2>
    <script type="text/javascript">
    let content = document.getElementById("urban");
    alert(content.textContent);
</script>
</body>
</html>

In the snippet code above, the getElementById()was utilized to select the h2 element with the id ‘urban’. Afterward, access the textContent property to display the text of the node.

The Output

Urban.jpg

This is how the textContent property modifies the text of an element in JavaScript.

How to set the textual content of an element using the textContent property.

Example2: How to set the textual content of an element using the textContent property:

    <html>
<head>
<meta charset= "UTF-8">
<title>Beautiful Countries in Africa</title>
</head>
<body>
<h4>textContent Property</h4>
<p id="heiress" onclick="clickMe()">Senegal is a beautiful country.</p>
<script>
function clickMe() {
  document.getElementById("heiress").textContent ="Senegal is a beautiful country.";
}
</script>
</body>
</html>

The above code block will produce the following output.:

Senegal.jpg

This is how the textContent property sets the text in JavaScript.

Conclusion

The textContent property in JavaScript allows for retrieving or setting a node's or element's text content. The new text node will take the place of the existing child nodes when the textContent property is set to true.

The textContent attribute delivers a node's or element's content along with all of its children (child nodes). If the element or node is a document, notation, or document type, it returns null. This article defined textContent listed its results and demonstrated how to utilize it in JavaScript.

Source:- textContent-javascript Text content in javascript