InnerHTMLouterHTML; innerTextouterText; textContent-GentleMint innerHTML v. s. outerHTML
- Element. innerHTML
- Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
- Functionality
- Get serialized HTML code describingIts 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 describlingThe 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 parentElement, Set outerHTML will throwDOMException.
- E.g.[Chrome Dev Console]Document.doc umentElement. outerHTML = 'a'; UncaughtDOMException: 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:// This is a p.
container = document.getElementById("container");d = document.getElementById("d");console.log(container.firstChild.nodeName); // logs "DIV"d.outerHTML = "This paragraph replaced the original p.
";console.log(container.firstChild.nodeName); // logs "P"// The #d p is no longer part of the document tree,// the new paragraph replaced it.
While the element will be replaced in the document, the variable whoseouterHTMLProperty was set will still hold a reference to the original element!
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(UseDocument.doc umentElement. textContentInstead ).
- Text inside the node:CDATA, comment, text node, processing instruction. (nodeValue)
- Concatenation of children nodes (excludingComment, processing instructionNodes) text: other types node
- Set:Remove node children and replace it with a text node.
- Difference from innerText
- Why we still need innerText sometime?
- Browser compatibility!
- IE has better supportInnerTextThanTextContent.Only IE9 + supports textContent, but IE6 + supports innerText.
- Common usage:
TextContent v. s. innerHTML
- It's recommand to use textContent!
- InnerHTML parse text as HTML (partition t"Script"Element)-> poor performance!
- InnerHTML has security problem!
