如何正确使用JavaScript中的innerText和innerHTML属性？

在JavaScript中，innerText和innerHTML是两个常用的属性，用于获取或设置HTML元素的内容，它们的主要区别在于处理文本的方式和返回的数据类型。

innerText 属性

innerText属性返回一个元素的文本内容，包括所有子元素的文本内容，它不考虑元素的标签，只返回实际的文本内容，需要注意的是，innerText不会返回隐藏的元素（如display: none）的文本内容。

示例：

<div id="example">
  <p>这是一个段落。</p>
  <span style="display:none">隐藏的文本</span>
</div>

var element = document.getElementById("example");
console.log(element.innerText); // 输出： "这是一个段落。"

innerHTML 属性

innerHTML属性返回一个元素的HTML内容，包括所有子元素的HTML标签和内容，它返回的是一个完整的HTML字符串，可以直接插入到文档中。

示例：

<div id="example">
  <p>这是一个段落。</p>
  <span style="display:none">隐藏的文本</span>
</div>

var element = document.getElementById("example");
console.log(element.innerHTML); // 输出： "<p>这是一个段落。</p><span style="display:none">隐藏的文本</span>"

表格对比

相关问题与解答

1、问题: 如果我想获取一个元素的所有文本内容，包括其子元素的文本内容，应该使用哪个属性？

答案: 你应该使用innerText属性，这个属性会递归地获取元素及其所有子元素的文本内容，但不包括隐藏元素的文本内容。

2、问题: 我如何修改一个元素的HTML内容，例如添加一个新的子元素或更改现有子元素的文本？

答案: 你可以使用innerHTML属性来修改元素的HTML内容，通过给innerHTML赋值，你可以插入新的HTML代码或替换现有的HTML代码。

var element = document.getElementById("example");
element.innerHTML += '<p>这是新添加的段落。</p>'; // 添加新的段落
element.innerHTML = element.innerHTML.replace('这是一个段落。', '这是被替换的段落。'); // 替换现有段落的文本