innerText和innerHTML之间的区别

Question

是什么区别innerHTML,innerText并且childNodes[].value在JavaScript？

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');

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是由微软推出的,有一段时间没有得到Firefox的支持.2016年8月,innerText被WHATWG采用并在v45中添加到Firefox中.
• innerText 为您提供样式感知的文本表示,尝试匹配浏览器呈现的内容,这意味着:
  • innerText适用text-transform和white-space规则
  • innerText 修剪线条之间的空白区域,并在项目之间添加换行符
  • innerText 不会返回不可见项目的文本
• innerText将返回textContent从未呈现的元素<style />和`
• Node元素的属性

node.textContent

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

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

虽然这是W3C标准,但IE <9不支持.

• 不知道样式,因此将返回CSS隐藏的内容
• 不会触发回流(因此性能更高)
• Node元素的属性

node.value

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

x.value // => null

<input />例如,输入标签()确定一个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>

来自文档:

注意:对于某些输入类型,返回的值可能与用户输入的值不匹配.例如,如果用户在a中输入非数字值<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>

Answer 2

innerText但是,与innerHTML您不同的是,您可以使用HTML富文本,而不会自动对文本进行编码和解码.换句话说,innerText检索标记的内容并将其设置为纯文本,而innerHTML以HTML格式检索和设置内容.

Answer 3

InnerText物业HTML编码的内容,转向<p>到<p>如果要插入你需要使用HTML标签等等InnerHTML.

Answer 4

简单来说:

1. innerText将按原样显示该值,并忽略HTML可能包含的任何格式.
2. innerHTML将显示该值并应用任何HTML格式.

Answer 5

双方innerText并innerHTML 返回内部部件的HTML元素。

和之间innerTextinnerHTML的唯一区别是：innerText将 HTML 元素（整个代码）作为字符串返回并在屏幕上显示 HTML 元素（作为 HTML 代码），而innerHTML仅返回 HTML 元素的测试内容。

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

const ourstring = 'My name is <b class="name">Satish chandra Gupta</b>.';
document.getElementById('innertext').innerText = ourstring;
document.getElementById('innerhtml').innerHTML = ourstring;

.name {
    color:red;
}

<p><b>Inner text below. It inject string as it is into the element.</b></p>
<p id="innertext"></p>
<br />
<p><b>Inner html below. It renders the string into the element and treat as part of html document.</b></p>
<p id="innerhtml"></p>