为什么更改innerText值也会同时更改innerHTML? [英] Why does changing innerText value also changes innerHTML?

问题描述

我有一个创建如下按钮的asp.net代码:

I have a asp.net code that creates a button as follows:

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

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

now in the javascript file I am doing the following inside the function1 function:

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

我注意到的是在该行之前:"document.getElementById(" button1).innerText =" Minimize;"执行"document.getElementById("button1").innerHTML"中的值是

What I noticed was before the line : "document.getElementById("button1").innerText = "Minimize";" is executed the value in "document.getElementById("button1").innerHTML" is

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

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

but after that line is executed the value in "document.getElementById("button1").innerHTML" is

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

为什么当我仅更改innerText值时，innerHTML值会发生变化?

Why is innerHTML value changing as I only changed the innerText value ?

先谢谢了.

P.S.抱歉，这可能是一个愚蠢的问题，但是我从几周后才开始学习这种语言.

P.S. Sorry this might be a stupid question but I have only started learning this language since a couple of weeks.

推荐答案

innerText 和 innerHTML 均设置元素的HTML.区别在于 innerText ，顺便说一句，您可能想使用 textContent 替换字符串，以使您无法在其中嵌入HTML内容.

Both innerText and innerHTML set the HTML of the element. The difference is that innerText—by the way, you might want to use textContent instead—will escape the string so that you can't embed HTML content in it.

例如，如果您这样做:

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

然后您实际上会在屏幕上看到字符串< span> Hello</span>" ，而不是"Hello" (在span内).

Then you'd actually see the string "<span>Hello</span>" on the screen, as opposed to "Hello" (inside a span).

innerText 也有其他一些细微之处，上面引用的MDN文章中对此进行了介绍.

There are some other subtleties to innerText as well, which are covered in the MDN article referenced above.

这篇关于为什么更改innerText值也会同时更改innerHTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！