outerHTML

outerHTML is a property of the Element interface in the web platform. It returns the serialized HTML fragment that represents the element and all of its descendants, including the element's own start and end tags. By contrast, innerHTML returns only the HTML contained inside the element, excluding the element’s own tag.

Reading outerHTML yields a string containing the element’s complete markup. Setting outerHTML replaces the element in the document with the provided HTML string, effectively substituting the element and its contents with new markup. For example, selecting a paragraph and assigning outerHTML to '<section class="new">Updated</section>' will replace that paragraph element in the DOM with the new section.

Common uses include dynamic DOM updates, simple templating, and serializing a portion of the document for storage or transmission. It can be convenient for quick replacements without creating new nodes and reparenting them, but it should be used with care in complex interfaces.

Caveats and considerations include the re-parsing and re-insertion of HTML, which can affect performance and reset element state or event listeners. Injecting untrusted content via outerHTML can create security risks such as cross-site scripting unless the content is properly sanitized. As with other DOM manipulations, compatibility is strong across modern browsers (Chrome, Firefox, Edge, Safari), while very old environments may have limited or no support.

See also: innerHTML, insertAdjacentHTML, replaceChild.

---