innerhtml v.s. outerhtmlelement.innerhtmlreference: https://developer.mozilla.org/en-us/docs/web/api/element/innerhtmlfunctionalityget 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.outerhtmlreference: https://developer.mozilla.org/en-us/docs/web/api/element/outerhtmlfunctionalityget 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.noteif 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:// this is a div.
container = document.getelementbyid(container);d = document.getelementbyid(d);console.log(container.firstchild.nodename); // logs divd.outerhtml = 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!
innertext and outertextnode.innertextnon-standard: do not use it on production site.htmlelement.outertextnon-standard: do not use it on production site.featurechromefirefox (gecko)internet exploreroperasafari (webkit)
basic support 4 45 (45) 6 9.6 (probably earlier) 3
textcontent v.s innertextnode.textcontentget: different node types gets different resultnull: 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 nodeset: remove node children and replace it with a text node.difference from innertextmany... : 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
get
it = currheaderchildnodes[i].innertext || currheaderchildnodes[i].textcontent;
textcontent v.s. innerhtmlit's recommand to use textcontent!innerhtml parse text as html (except script element) -> poor performance!innerhtml has security problem!