javascript - innerText和innerHTML之间的区别(Difference between innerText and innerHTML)

Question

JavaScript中的innerHTML ， innerText和childNodes[].value innerText什么区别？

  ask by user2819851 translate from so

Answer 1

The examples below refer to the following HTML snippet:(下面的示例引用以下HTML代码段：)

<div id="test"> Warning: This element contains <code>code</code> and <strong>strong language</strong>. </div> The node will be referenced by the following JavaScript:(以下JavaScript将引用该节点：) var x = document.getElementById('test');
element.innerHTML Sets or gets the HTML syntax describing the element's descendants(设置或获取描述元素后代的HTML语法) x.innerHTML // => " // => Warning: This element contains <code>code</code> and <strong>strong language</strong>. // => " This is part of the W3C's DOM Parsing and Serialization Specification .(这是W3C的DOM解析和序列化规范的一部分 。) Note it's a property of Element objects.(请注意，这是Element对象的属性。)
node.innerText Sets or gets the text between the start and end tags of the object(设置或获取对象的开始和结束标签之间的文本) x.innerText // => "Warning: This element contains code and strong language." innerText was introduced by Microsoft and was for a while unsupported by Firefox.(innerText由Microsoft引入，并且有一段时间不受Firefox支持。) In August of 2016, innerText was adopted by the WHATWG and was added to Firefox in v45.(在2016年8月， WHATWG通过了 innerText ，并将其添加到v45中的Firefox中。) innerText gives you a style-aware, representation of the text that tries to match what's rendered in by the browser this means:(innerText为您提供了一种样式感知的文本表示形式，该文本试图与浏览器呈现的内容相匹配，这意味着：) innerText applies text-transform and white-space rules(innerText应用text-transform和white-space规则) innerText trims white space between lines and adds line breaks between items(innerText修剪行之间的空白并在项目之间添加换行符) innerText will not return text for invisible items(innerText将不返回不可见项的文本) innerText will return textContent for elements that are never rendered like <style /> and `(innerText将为从未渲染过的元素（如<style />和`）返回textContent 。) Property of Node elements(Node元素的属性)
node.textContent Gets or sets the text content of a node and its descendants.(获取或设置节点及其后代的文本内容。) x.textContent // => " // => Warning: This element contains code and strong language. // => " While this is a W3C standard , it is not supported by IE < 9.(虽然这是W3C标准 ，但IE <9不支持。) Is not aware of styling and will therefore return content hidden by CSS(不了解样式，因此将返回CSS隐藏的内容) Does not trigger a reflow (therefore more performant)(不触发重排（因此性能更高）) Property of Node elements(Node元素的属性)
node.value This one depends on the element that you've targeted.(这取决于您所针对的元素。) For the above example, x returns an HTMLDivElement object, which does not have a value property defined.(对于上面的示例， x返回一个HTMLDivElement对象，该对象未定义value属性。) x.value // => null Input tags ( <input /> ), for example, do define a value property , which refers to the "current value in the control".(例如，输入标签（ <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> From the docs :(从文档 ：) Note: for certain input types the returned value might not match the value the user has entered.(注意：对于某些输入类型，返回的值可能与用户输入的值不匹配。) For example, if the user enters a non-numeric value into an <input type="number"> , the returned value might be an empty string instead.(例如，如果用户在<input type="number">非数字值，则返回的值可能是空字符串。)
Sample Script(样例脚本) Here's an example which shows the output for the HTML presented above:(这是一个示例，显示了上面显示的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>