为啥更改 innerText 值也会更改 innerHTML？

Posted 2023-02-21

【中文标题】为啥更改 innerText 值也会更改 innerHTML？

【英文标题】：Why does changing innerText value also changes innerHTML?为什么更改 innerText 值也会更改 innerHTML？

【发布时间】：2014-03-26 19:13:40

【问题描述】：

我有一个创建按钮的 asp.net 代码，如下所示：

<a href="#" id="button1" title="Maximize" onclick="function1('span1')" class="button"><span id="span1" class="iconMaximizeLightText">Maximize</span></a>

现在在 javascript 文件中，我在 function1 函数中执行以下操作：

document.getElementById("button1").innerText = "Minimize";
document.getElementById("button1").value = "Minimize";
document.getElementById("button1").className = "iconMinimizeLightText";

我注意到在以下行之前：“document.getElementById("button1").innerText = "Minimize";"执行"document.getElementById("button1").innerhtml" 中的值是

document.getElementById("button1").innerHTML = "<span id=span1 class=iconMaximizeLightText>Maximize</span>"

但在该行执行后，"document.getElementById("button1").innerHTML" 中的值是

document.getElementById("button1").innerHTML = "Minimize"

我只更改了 innerText 值，为什么 innerHTML 值会发生变化？

提前致谢。

附：抱歉，这可能是一个愚蠢的问题，但我几周后才开始学习这门语言。

【问题讨论】：

见Difference between innerText and innerHTML in javascript

【参考方案1】：

innerText 和 innerHTML 都设置元素的 HTML。不同之处在于innerText——顺便说一下，你可能想使用textContent——将转义字符串，这样你就不能在其中嵌入HTML内容。

例如，如果您这样做：

var div = document.createElement('DIV');
div.innerText = '<span>Hello</span>';
document.body.appendChild(div);

那么您实际上会在屏幕上看到字符串"<span>Hello</span>"，而不是"Hello"（在跨度内）。

innerText 还有其他一些微妙之处，在上面引用的 MDN 文章中进行了介绍。