JavaScript中的innerText详解

发布时间：2023-05-19

JS中的innerText方法可以在指定元素中获取或设置其文本，并且它与innerHTML方法不同，不会返回HTML标签。本文将从多个方面详细介绍innerText的使用方法和特点。

一、获取和设置文本

使用innerText方法可以获取指定元素中的文本内容，也可以将文本内容设置为指定的字符串。例如：

// 获取文本内容
let div = document.querySelector('div');
let text = div.innerText;
// 设置文本内容
div.innerText = 'Hello World!';

上述代码中，首先获取了页面中第一个 div 元素的文本内容，并将其赋值给变量 text。然后，将这个元素的值设置为 'Hello World!'。

二、innerHTML与innerText的区别

innerText与innerHTML之间有许多区别。innerHTML会返回元素内的HTML内容，而innerText则返回元素中的纯文本内容。例如：

// HTML内容
let div1= document.querySelector('.div1');
console.log(div1.innerHTML);
// 纯文本内容
let div2 = document.querySelector('.div2');
console.log(div2.innerText);

上述代码中，首先获取了页面中两个 div 元素的内容。.div1元素包含了一个a标签，因此console.log(div1.innerHTML)的结果是a标签整个内容：“<a href="#">click me</a>”。而.div2元素只包含了一些文本，因此console.log(div2.innerText)的结果是div2元素中的文本内容：“Click Me!”。 需要注意的是，innerText是不会显示被CSS隐藏的元素的内容的。例如：

<div style="display: none">Hidden Text</div>

上述代码中，页面上有一个 div 元素，使用CSS设置display属性为 none。当通过innerText或innerHTML方法获取其内容时，都将返回一个空字符串。

三、innerText处理HTML标签

与innerHTML不同，innerText会自动将HTML标签转换为可读格式。例如：

<div>
  This is a <strong>bold text</strong>!
</div>

上述代码中，页面上有一个div元素，包含了一个<strong>标签，在浏览器中把它显示为粗体文本。如果使用innerText方法获取其文本内容，得到的结果是去除了标签的普通文本：

let div= document.querySelector('div');
console.log(div.innerText); // This is a bold text!

四、innerText会保留空格和换行符

innerText会保留文本中的空格和换行符。例如：

<div>
  This is a 
  multi-line text.
</div>

上述代码中，页面上有一个 div 元素，包含了换行符。使用innerText方法获取其文本内容时，会保留其中的换行符：

let div= document.querySelector('div');
console.log(div.innerText); // This is a 
                            // multi-line text.

需要注意的是，IE浏览器有可能会自动去除文本中连续的空格和换行符。而现代浏览器则不会对文本进行这样的处理。

五、innerText的兼容性问题

需要注意的是，innerText方法不是W3C标准，而是一个IE浏览器的独有属性。在某些情况下，它可能会有兼容性问题，因此在使用时需要注意。如果需要完全跨浏览器兼容，可以使用textContent属性代替innerText。

let div = document.querySelector('div');
if ('textContent' in div) {
  // 非IE浏览器
  console.log(div.textContent);
} else {
  // IE浏览器
  console.log(div.innerText);
}
推荐文章