innerText和innerHTML之间的区别

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

innerText不过，与不同，它innerHTML使您可以处理HTML富文本格式，并且不会自动对文本进行编码和解码。换句话说，innerText以纯文本形式innerHTML检索和设置标签的内容，而以HTML格式检索和设置标签的内容。

下面的示例引用以下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是由Microsoft引入的，Firefox暂时不支持它。在2016年八月，innerText是通过了WHATWG，并加入到Firefox中的V45。
• 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>

从文档：

注意：对于某些输入类型，返回的值可能与用户输入的值不匹配。例如，如果用户在中输入了非数字值<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物业HTML编码的内容，转向<p>对<p>等，如果你想插入你需要使用HTML标签InnerHTML。

简单来说：

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

var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);

要进一步优化它并例如检索值Alec，请使用另一个.childNodes [1]

var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);

在方面MutationObservers，由于浏览器先删除节点，然后添加值为的新节点，设置会innerHTML产生childList突变innerHTML。

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

innerText和之间的唯一区别innerHTML是，innerText将字符串按原样插入到元素中，同时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;
}

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

InnerText只会返回换行符中每个元素以纯文本形式显示的页面的文本值，而innerHTML会返回body标记内所有内容的HTML内容，并childNodes返回节点列表，顾名思义。

该innerText属性返回html元素的实际文本值，而innerHTML返回HTML content。下面的例子：

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>

要添加到列表中，innerText将保持文本转换，innerHTML不会