Element

`Element.prototype.outerHTML`

Gets the serialized HTML fragment describing the element including its descendants, or replaces the element with nodes parsed from the given string

Syntax

JavaScript

element.outerHTML

Return Value

A string containing the HTML serialization of the element and its descendants

Examples

Basic Usage

const el = document.querySelector('.card')!
console.log(el.outerHTML)

Practical Example

const btn = document.createElement('button')
btn.textContent = 'Click'
btn.className = 'primary'
console.log(btn.outerHTML)
// '<button class="primary">Click</button>'

Advanced Usage

function copyElement(source: Element): Element {
  const temp = document.createElement('div')
  temp.innerHTML = source.outerHTML
  return temp.firstElementChild!
}

Understanding Element.prototype.outerHTML

The Element.prototype.outerHTML method in JavaScript gets the serialized HTML fragment describing the element including its descendants, or replaces the element with nodes parsed from the given string. It belongs to the Element object and is one of the most widely used methods for working with element values in modern JavaScript and TypeScript applications.

The method signature is element.outerHTML. When called, it returns a string containing the html serialization of the element and its descendants. Understanding when and how to use outerHTML() helps you write more expressive, readable code.

Common use cases for Element.prototype.outerHTML include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like dom-innerhtml, dom-textcontent, dom-clonenode, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for Element.prototype.outerHTML is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.