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.