How to Retrieve Text from Div Tags in JavaScript without jQuery?

Alternative Methods for Retrieving Text from Div Tags in JavaScript

While using jQuery to retrieve the text content of a div tag is a common approach, it is certainly not the only option. JavaScript offers native methods that can effectively extract the text without the reliance on external libraries.

One of the primary methods for this purpose is the textContent property. Unlike innerHTML, which returns the entire HTML content of the element, including tags and attributes, textContent solely retrieves the text content.

Let's delve into an example to demonstrate its usage:

<code class="js">function test() {
  var t = document.getElementById('superman').textContent;
  alert(t);
}</code>

In this scenario, the textContent property is assigned to the t variable, which subsequently displays the plain text from the div with the id "superman" upon calling the alert() function.

It's worth noting that the textContent property, similar to innerHTML, consider text nodes and elements without child nodes as text content. Avoid relying on textContent if your div element contains multiple nested elements or complex markup, as it may not accurately capture the desired text.

The above is the detailed content of How to Retrieve Text from Div Tags in JavaScript without jQuery?. For more information, please follow other related articles on the PHP Chinese website!