innerText、innerHTML和Value之间的区别？

Question

JavaScript中的innerHTML、innertext和value有什么区别？

Answer 1

下面的示例引用了以下HTML代码段：

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

该节点将被以下JavaScript引用：

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

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

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

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

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

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

• innertext是由Microsoft引入的，Firefox有一段时间不支持它。2016年8月，innertext被WHATWG采用，并在V45中添加到Firefox中。
• innertext为您提供了一种样式感知的文本表示形式，它试图与浏览器呈现的内容匹配，这意味着：
  • innertext应用文本转换和空白规则
  • innertext修剪行之间的空白并在项之间添加换行符
  • innertext不会返回不可见项的文本

  
  

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

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

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

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

  
  

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

  x.value // => null
  

  例如，输入标记()确实定义了value属性，该属性引用“控件中的当前值”。

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

  从文档中：

  注意：对于某些输入类型，返回的值可能与用户输入的值不匹配。例如，如果用户在中输入非数值，则返回的值可能是空字符串。

  
  

  下面是一个示例,它显示了上面给出的HTML的输出：

  null

  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>

Answer 2

与innertext不同，innerhtml允许您使用HTML格式文本，而不自动编码和解码文本。换句话说，innertext检索并设置标记的内容为纯文本，而innerhtml检索并设置HTML格式的内容。