在前端开发中，文本是无法避免的。操作文本时，常见的几个属性包括 innerText、innerHTML、textContent、outerHTML 和 outerText 等。这些属性看似相似，实则各有不同，本文将详细探讨它们的区别和使用场景。
1. innerText
innerText 属性返回一个元素的所有文本内容，但不包含 HTML 标签。这意味着，如果该元素包含任何 HTML 标记，则将忽略它们，只返回纯文本。
以下是一个示例：
<div id="myDiv"> This is <b>bold</b> text. </div>
const div = document.getElementById('myDiv');
console.log(div.innerText); // 输出：This is bold text.可以看到，innerText 只返回了文本内容，并将 <b> 标签忽略。
需要注意的是，innerText 是 W3C 标准的一部分，但并非所有浏览器都支持该属性。而且，在 IE8 中，innerText 不会返回换行符（\n）。如果需要在跨浏览器的环境中使用 innerText，最好使用 jQuery 的 text() 方法，该方法适用于所有主流浏览器。
2. innerHTML
innerHTML 属性返回一个元素及其所有子元素的 HTML 内容，包括标签。这意味着，如果该元素包含任何 HTML 标记，则将在结果中保留它们。
以下是一个示例：
<div id="myDiv"> This is <b>bold</b> text. </div>
const div = document.getElementById('myDiv');
console.log(div.innerHTML); // 输出：This is <b>bold</b> text.可以看到，innerHTML 返回了整个 HTML 片段，包括 <b> 标签。
需要注意的是，使用 innerHTML 可能存在安全风险。如果您不信任源代码，最好不要使用 innerHTML 将其插入到页面上。否则，可能会受到跨站点脚本攻击（XSS）。
3. textContent
textContent 属性返回一个元素及其所有子元素的文本内容，但不包含 HTML 标签。与 innerText 相比，该属性已成为 W3C 标准的一部分，并且在大多数现代浏览器中得到了支持。
以下是一个示例：
<div id="myDiv"> This is <b>bold</b> text. </div>
const div = document.getElementById('myDiv');
console.log(div.textContent); // 输出：This is bold text.可以看到，textContent 返回了整个文本内容，并将 <b> 标签忽略。
需要注意的是，与 innerText 不同，textContent 返回换行符（\n）。
4. outerHTML
outerHTML 属性返回一个元素及其所有子元素的 HTML 内容，包括标签。与 innerHTML 相比，该属性还返回了该元素本身的 HTML 标记。
以下是一个示例：
<div id="myDiv"> This is <b>bold</b> text. </div>
const div = document.getElementById('myDiv');
console.log(div.outerHTML); // 输出：<div id="myDiv">This is <b>bold</b> text.</div>可以看到，outerHTML 返回了整个 HTML 片段，包括 <div> 标签。
需要注意的是，与 innerHTML 相似，使用 outerHTML 也可能存在安全风险。
5. outerText
outerText 是一个非标准属性
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12556