innerHTML/outerHTML; innerText/outerText; textContent_html/css_WEB-ITnose
程序员文章站
2022-06-11 13:54:30
...
innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML Functionality Get serialized HTML code describing its descendants. Set : Remove all the children, parse the content string and assign the resulting nodes as the children of the element. Element.outerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML Functionality Get serialized HTML fragment describling the element and its descendants. Set : Replace the element with the nodes generated by parsing the content string with parent of the element as the context node for the fragment parsing algorithm. NOTE If element has no parent element, set outerHTML will throw DOMException. e.g. [Chrome Dev Console] document.documentElement.outerHTML='a'; Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element': This element's parent is of type '#document', which is not an element node. Considering below code.
innerText and outerText Node.innerText Non-standard: DO NOT use it on production site. HTMLElement.outerText Non-standard: DO NOT use it on production site.
textContent v.s innerText Node.textContent
Get: different node types gets different result null: document, notation (use document.documentElement.textContent instead). text inside the node: CDATA, comment, text node, processing instruction. (nodeValue)
concatenation of children nodes (excluding comment, processing instruction nodes) text: other types node
Set: Remove node children and replace it with a text node. Difference from innerText many... : refer to MDN. Why we still need innerText sometime? Browser compatibility! IE has better support for innerText than for textContent. Only IE9+ supports textContent, but IE6+ supports innerText. Common usage:
set
get
It's recommand to use textContent! innerHTML parse text as HTML (except "script" element) -> poor performance! innerHTML has security problem!
// HTML://container = document.getElementById("container");d = document.getElementById("d");console.log(container.firstChild.nodeName); // logs "DIV"d.outerHTML = "This is a div.This paragraph replaced the original div.
";console.log(container.firstChild.nodeName); // logs "P"// The #d div is no longer part of the document tree,// the new paragraph replaced it.
While the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element!
Basic support | 4 | 45 (45) | 6 | 9.6 (probably earlier) | 3 |
t[t.innerText ? 'innerText' : 'textContent'] = v.n
it = currHeaderChildNodes[i].innerText || currHeaderChildNodes[i].textContent;
textContent v.s. innerHTML
上一篇: PHP面试题一[转]
推荐阅读
-
innerHTML、innerText、outerHTML、textContent的区别
-
innerHTML,outerHTML,innerText,outerText的用法及区别解析_javascript技巧
-
innerHTML/outerHTML; innerText/outerText; textContent_html/css_WEB-ITnose
-
innerHTML、innerText、outerHTML的区别
-
innerHTML/outerHTML; innerText/outerText; textContent - GentleMint
-
javascript innerHTML、outerHTML、innerText、outerText的区别_javascript技巧
-
innerHTML/outerHTML; innerText/outerText; textContent - GentleMint
-
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解_javascript技巧
-
JavaScript中innerHTML,innerText,outerHTML的用法及区别_javascript技巧
-
innerHTML、innerText、outerHTML、textContent的区别