javascript - 为什么更改 innerText 值也会更改 innerHTML？

Question

我有一个创建按钮的 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"

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

提前致谢。

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

Answer 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 文章中有所介绍。