Element

`Element.prototype.innerHTML`

Gets or sets the HTML markup contained within the element

Syntax

JavaScript

element.innerHTML = htmlString

Parameters

Parameter	Type	Description
htmlString	string	A string of HTML to set as the element content

Return Value

A string containing the HTML serialization of the element's descendants

Examples

Basic Usage

const container = document.getElementById('output')!
container.innerHTML = '<p>Hello <strong>World</strong></p>'

Practical Example

const list = document.querySelector('ul')!
const items = ['Apple', 'Banana', 'Cherry']
list.innerHTML = items.map(i => `<li>${i}</li>`).join('')

Advanced Usage

function clearContent(id: string) {
  const el = document.getElementById(id)
  if (el) el.innerHTML = ''
}

Understanding Element.prototype.innerHTML

The Element.prototype.innerHTML method in JavaScript gets or sets the HTML markup contained within the element. 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.innerHTML = htmlString. It accepts 1 parameter: htmlString. When called, it returns a string containing the html serialization of the element's descendants. Understanding when and how to use innerHTML() helps you write more expressive, readable code.

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

Browser support for Element.prototype.innerHTML 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.