为什么更改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文件我做了功能1函数内的以下内容：

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

在此先感谢。

P.S.对不起，这可能是一个愚蠢的问题，但我只有几个星期才开始学习这门语言。

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