How to retrieve multiple texts under javascript tags

As a commonly used scripting language, JavaScript can help web developers easily manipulate HTML text. When we need to obtain multiple text contents under a label, we can use some simple JavaScript methods and statements to achieve this.

Using the innerHTML attribute

In JavaScript, we can use the innerHTML attribute to get the text content under the HTML tag. The innerHTML attribute can get all the text contained in the tag, including the text content of nested tags.

For example, suppose we have such an HTML structure:

<div id="container">
  <p>这是第一段文本</p>
  <p>这是第二段文本</p>
  <p>这是第三段文本</p>
</div>

We can use the following code to get the text content under all p tags:

var container = document.getElementById("container");
var innerText = container.innerHTML;

console.log(innerText);

The output result is:

<p>这是第一段文本</p>
<p>这是第二段文本</p>
<p>这是第三段文本</p>

However, it should be noted that the innerHTML attribute will not only obtain the text content, but also obtain the elements of the tag itself, including the attributes and events within the tag. Therefore, when using the innerHTML attribute to obtain the text content, you need to first Only by removing the HTML elements can we get the text we want.

Using the innerText attribute

In addition to the innerHTML attribute, we can also use the innerText attribute to get the plain text content under the HTML tag. It will ignore the HTML tag and return only the text content part. This attribute can only get the text content inside the current element, not the text content of its child elements.

Therefore, if we want to get multiple text contents under HTML tags, we need to use a for loop to get the innerText attribute of the child elements one by one. For example:

var container = document.getElementById("container");
var paragraphs = container.getElementsByTagName("p");
var innerText = "";

for (var i = 0; i < paragraphs.length; i++) {
  innerText += paragraphs[i].innerText + "
";
}

console.log(innerText);

The output result is:

这是第一段文本
这是第二段文本
这是第三段文本

Using the textContent attribute

In addition to the above two methods, we can also use the textContent attribute to obtain the text content under the HTML tag. Different from innerText, the textContent attribute will obtain all text nodes under the label, including all spaces and newlines within the label.

Similarly, if we want to get multiple text contents under HTML tags, we need to use a for loop to get the textContent attributes of the child elements one by one. For example:

var container = document.getElementById("container");
var paragraphs = container.getElementsByTagName("p");
var textContent = "";

for (var i = 0; i < paragraphs.length; i++) {
  textContent += paragraphs[i].textContent + "
";
}

console.log(textContent);

The output result is:

这是第一段文本
这是第二段文本
这是第三段文本

To sum up, JavaScript provides a variety of methods to obtain the text content under the HTML tag. Just choose the appropriate method according to your needs to obtain the required text content.

The above is the detailed content of How to retrieve multiple texts under javascript tags. For more information, please follow other related articles on the PHP Chinese website!