JavaScript中的innerHTML , innerText和childNodes[].value innerText什么区别?
innerHTML
innerText
childNodes[].value
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>
var x = document.getElementById('test');
element.innerHTML
x.innerHTML // => " // => Warning: This element contains <code>code</code> and <strong>strong language</strong>. // => "
Element
node.innerText
x.innerText // => "Warning: This element contains code and strong language."
text-transform
white-space
textContent
<style />
Node
node.textContent
x.textContent // => " // => Warning: This element contains code and strong language. // => "
node.value
x
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">
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>
1.4m articles
1.4m replys
5 comments
56.9k users