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值？

提前致谢。

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

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 文章也对此进行了介绍。