innerText, innerHTML和值之间的区别?

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

当前回答

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

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

2017-04-08 11:10:56

其他回答

innerText属性返回html元素的实际文本值，而innerHTML返回html内容。在下面的例子:

var element = document.getElementById('hello'); element.innerText = '<strong> hello world </strong>'; console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText); console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML); element.innerHTML = '<strong> hello world </strong>'; console.log('The <strong> tag we put above has been parsed using the innerHTML property so the .innerText will not show them \n ' + element.innerText); console.log(element.innerHTML); <p id="hello"> Hello world </p>

2019-04-06 16:10:40

下面的例子引用了下面的HTML片段:

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

该节点将被下面的JavaScript引用:

var x = document.getElementById('test');

element.innerHTML

设置或获取描述元素后代的HTML语法

x.innerHTML
// => "
// =>   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "

这是W3C DOM解析和序列化规范的一部分。注意，这是Element对象的属性。

node.innerText

设置或获取对象的开始标记和结束标记之间的文本

x.innerText
// => "Warning: This element contains code and strong language."

innerText was introduced by Microsoft and was for a while unsupported by Firefox. In August of 2016, innerText was adopted by the WHATWG and was added to Firefox in v45. innerText gives you a style-aware, representation of the text that tries to match what's rendered in by the browser this means: innerText applies text-transform and white-space rules innerText trims white space between lines and adds line breaks between items innerText will not return text for invisible items innerText will return textContent for elements that are never rendered like <style /> and ` Property of Node elements

node.textContent

获取或设置节点及其子节点的文本内容。

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

虽然这是W3C标准，但IE < 9不支持它。

不知道样式，因此将返回由CSS隐藏的内容不会触发回流流(因此性能更好) 节点元素属性

node.value

这取决于您所针对的元素。对于上面的例子，x返回一个HTMLDivElement对象，该对象没有定义value属性。

x.value // => null

例如，输入标记(< Input />)确实定义了一个值属性，它指的是“控件中的当前值”。

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

从文档中可以看出:

注意:对于某些输入类型，返回值可能不匹配用户输入的值。例如，如果用户输入非数值转换为<input type="number">，返回值可能是一个空字符串。

示例脚本

下面是一个例子，它显示了上面HTML的输出:

2013-09-26 15:11:11

1）内部网页

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

2) innerText

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

(3) textContent

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

2022-12-08 20:50:57