innerText 跟innerHtml 什么意思？有啥区别？

• innerText:

  • 仅获取或设置元素内的文本内容。
  • 不会解析HTML标签，即如果元素内有HTML标签，这些标签将被当作普通文本处理。
  • 在设置文本时，会自动转义HTML特殊字符，防止XSS攻击。
  • 受CSS样式影响，例如，当元素被隐藏（如使用 display: none;）时，innerText 不会返回这些隐藏元素的内容。

• innerHTML:

  • 获取或设置元素内的HTML内容。
  • 解析并渲染HTML标签，可以用来插入复杂的HTML结构。
  • 设置内容时不会转义HTML特殊字符，因此可以用来动态生成页面内容。
  • 不受CSS样式影响，即使元素被隐藏，innerHTML 仍然会返回其内部的所有HTML内容。

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

使用 innerText:
const div = document.getElementById('example');
console.log(div.innerText); // 输出: "这是一个段落。"


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

总结：

innerText 只返回可见的文本内容，而 innerHTML 返回完整的HTML内容。