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

简单地说:

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

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

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

下面的例子引用了下面的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的输出:

var properties = ['innerHTML', 'innerText', 'textContent', 'value']; // Writes to textarea#output and console function log(obj) { console.log(obj); var currValue = document.getElementById('output').value; document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj; } // Logs property as [propName]value[/propertyName] function logProperty(obj, property) { var value = obj[property]; log('[' + property + ']' + value + '[/' + property + ']'); } // Main log('=============== ' + properties.join(' ') + ' ==============='); for (var i = 0; i < properties.length; i++) { logProperty(document.getElementById('test'), properties[i]); } <div id="test"> Warning: This element contains <code>code</code> and <strong>strong language</strong>. </div> <textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

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

innerText属性设置或返回指定节点及其所有后代的纯文本文本内容，而innerHTML属性获取和设置元素中的纯文本或HTML内容。与innerText不同，innerHTML允许您使用HTML富文本，并且不会自动对文本进行编码和解码。