JavaScript中innerHTML, innerText和value的区别是什么?


当前回答

就mutation观察者而言,设置innerHTML会生成一个childList突变,因为浏览器会删除节点,然后添加一个带有innerHTML值的新节点。

如果设置innerText,则会生成characterData突变。

其他回答

InnerText将仅以纯文本形式返回页面的文本值,其中每个元素在换行符上,而innerHTML将返回body标记内所有内容的HTML内容,而childNodes将返回一个节点列表,顾名思义。

简单地说:

innerText将显示值,并忽略任何HTML格式可能 被包括。 innerHTML将显示值并应用任何HTML格式。

innerText和innerHTML都返回HTML元素的内部部分。

innerText和innerHTML之间唯一的区别是:innerText返回HTML元素(整个代码)作为字符串并在屏幕上显示HTML元素(作为HTML代码),而innerHTML只返回HTML元素的文本内容。

请看下面的例子以更好地理解。运行下面的代码。

const ourstring = 'My name is <b class="name">Satish chandra Gupta</b>.'; . getelementbyid(“innertext的实现)。innerText = ourstring; . getelementbyid(“innerhtml”)。innerHTML = ourstring; . name { 颜色:红色; } <p><b>下面的内部文本。</b></p> < p id = " innertext”实现> < / p > < br > <p><b>下面的内部html。它将字符串呈现到元素中,并将其视为html文档的一部分 < p id = " innerhtml " > < / p >

1)内部网页

设置标记内的所有HTML内容 返回标记内的所有HTML内容 包括样式+空白

2) innerText

设置标记内的所有内容(使用标记对应的换行符) 返回标签内的所有HTML内容(带有标签对应的换行符) 忽略标签(只显示文本) 忽略样式+空白 如果我们有style:"visibility:hidden;"内标签 |_ innerText包含样式->隐藏内容

(3) textContent

设置标签内的所有内容(没有标签对应的换行符) 返回标签内的所有内容(没有标签对应的换行符) 包括空格 如果我们有style:"visibility:hidden;"内标签 |_ textContent忽略样式->显示内容 textContent具有更好的性能,因为它的值不会解析为HTML。

要添加到列表中,innerText将保留您的文本转换,innerHTML习惯。