innerHTML/outerHTML; innerText/outerText; textContent - GentleMint
程序员文章站
2022-04-26 17:08:46
...
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.
// 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!
- If element has no parent element, set outerHTML will throw DOMException.
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.
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 4 | 45 (45) | 6 | 9.6 (probably earlier) | 3 |
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.
-
Get: different node types gets different result
- 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
t[t.innerText ? 'innerText' : 'textContent'] = v.n
- set
- Browser compatibility!
-
-
- get
it = currHeaderChildNodes[i].innerText || currHeaderChildNodes[i].textContent;
- get
-
textContent v.s. innerHTML
- It's recommand to use textContent!
- innerHTML parse text as HTML (except "script" element) -> poor performance!
- innerHTML has security problem!
上一篇: JSON为什么那样红为什么要用json(另有洞天)_基础知识
下一篇: 用PS制作唯美的水下人像特效
推荐阅读
-
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
-
js中 value&innerHTML&innerText&textContent之间的区别对比
-
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解_javascript技巧
-
JavaScript中innerHTML,innerText,outerHTML的用法及区别_javascript技巧