InnerHTML 和 InnerText 有什么区别 - Javascript

在 Javascript 中，有两个类似的属性 innerHTML 和 innerText，它们都用于获取或设置元素的内容。它们的使用方式非常类似，但是它们之间还是有一些区别的。

InnerHTML

innerHTML 是一个元素的属性，用于获取或设置元素的 HTML 内容，它会把元素及其子元素的所有 HTML 代码都包含其中。

<p id="myParagraph">Hello, <strong>world!</strong></p>

const myParagraph = document.querySelector('#myParagraph');

// 获取元素的 HTML 内容
console.log(myParagraph.innerHTML); // 输出: 'Hello, <strong>world!</strong>'

// 设置元素的 HTML 内容
myParagraph.innerHTML = 'Hi, <em>Javascript</em>!';

console.log(myParagraph.innerHTML); // 输出: 'Hi, <em>Javascript</em>!'

从上面的代码片段可以看出，innerHTML 可以获取或设置元素的 HTML 内容，包括元素的子元素和其他 HTML 代码。在设置这个属性的时候，元素的整个 HTML 内容都会被替换掉。

InnerText

与 innerHTML 不同，innerText 是一个元素的属性，用于获取或设置元素的 文本内容，它只包含纯文本，没有 HTML 代码。

<p id="myParagraph">Hello, <strong>world!</strong></p>

const myParagraph = document.querySelector('#myParagraph');

// 获取元素的文本内容
console.log(myParagraph.innerText); // 输出: 'Hello, world!'

// 设置元素的文本内容
myParagraph.innerText = 'Hi, Javascript!';

console.log(myParagraph.innerText); // 输出: 'Hi, Javascript!'

从上面的代码片段可以看出，innerText 可以获取或设置元素的文本内容，只包含纯文本，没有 HTML 代码。在设置这个属性的时候，元素的整个文本内容都会被替换掉。

区别

虽然 innerHTML 和 innerText 看起来非常相似，但它们之间还是存在着一些区别：

• innerHTML 获取或设置元素的 HTML 内容，包括元素的子元素和其他 HTML 代码；innerText 获取或设置元素的纯文本内容，没有 HTML 代码。
• 在读取元素内容时，如果元素包含 HTML 元素，innerHTML 会获取这些 HTML 元素的内容，而 innerText 只会获取纯文本。
• 在设置元素内容时，innerHTML 会替换整个元素的内容，包括子元素和其他 HTML 代码；而 innerText 只会替换元素的纯文本内容，不会影响 HTML 元素。
• innerHTML 可以直接插入 HTML 代码，但这样容易受到 XSS 攻击。

总结

innerHTML 和 innerText 都是用来获取或设置元素内容的属性，它们之间的区别在于 innerHTML 获取或设置元素的 HTML 内容，包括元素的子元素和其他 HTML 代码，而 innerText 只获取或设置元素的纯文本内容，没有 HTML 代码。在使用这两个属性时，需要根据实际需求来选择合适的属性来获取或设置元素的内容。