Element: innerHTML property

Getting the property returns a string containing the HTML serialization of the element's descendants.

Setting the value of innerHTML removes all of the element's descendants and replaces them with nodes constructed by parsing the HTML given in the assigned TrustedHTML or string. When set to the null value, that null value is converted to the empty string (""), so elt.innerHTML = null is equivalent to elt.innerHTML = "". Note that <script> elements in the assigned value are injected but not executed.

Shadow roots are dropped from the serialized and injected HTML.

SyntaxError DOMException

Thrown if an attempt was made to set the value of innerHTML using a string which is not properly-formed HTML.

TypeError

Thrown if the property is set to a string when Trusted Types are enforced by a CSP and no default policy is defined.

NoModificationAllowedError DOMException

Thrown if an attempt was made to insert the HTML into a node whose parent is a Document.

innerHTML gets a serialization of the nested child DOM elements within the element, or sets HTML or XML that should be parsed to replace the DOM tree within the element.

The serialization of the DOM tree read from the property does not include shadow roots — if you want to get a HTML string that includes shadow roots, you must instead use the Element.getHTML() or ShadowRoot.getHTML() methods.

Similarly, when setting element content using innerHTML, the HTML string is parsed into DOM elements that do not contain shadow roots. So for example <template> is parsed into as HTMLTemplateElement, whether or not the shadowrootmode attribute is specified. In order to set an element's contents from an HTML string that includes declarative shadow roots, you must instead use Element.setHTMLUnsafe() or ShadowRoot.setHTMLUnsafe().

Note that some browsers serialize the < and > characters as < and > when they appear in attribute values (see Browser compatibility). This is to prevent a potential security vulnerability (mutation XSS) in which an attacker can craft input that bypasses a sanitization function, enabling a cross-site scripting (XSS) attack.

The innerHTML property is probably the most common vector for Cross-site-scripting (XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized. While the property does prevent <script> elements from executing when they are injected, it is susceptible to many other ways that attackers can craft HTML to run malicious JavaScript. For example, the following example would execute the code in the error event handler, because the <img> src value is not a valid image URL:

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

You can mitigate these issues by always assigning TrustedHTML objects instead of strings, and enforcing trusted type using the require-trusted-types-for CSP directive. This ensures that the input is passed through a transformation function, which has the chance to sanitize the input to remove potentially dangerous markup before it is injected. This is demonstrated in the following sections.

Reading innerHTML causes the user agent to serialize the HTML or XML fragment comprised of the element's descendants. The resulting string is returned.

const contents = myElement.innerHTML;

This lets you look at the HTML markup of the element's content nodes.

Setting the value of innerHTML lets you replace the existing contents of an element with a new DOM tree parsed from an input. This completely removes the original content, including any event handlers associated with the removed elements.

Trusted types are not yet supported on all browsers, so first we define the trusted types tinyfill. This provides an implementation of trustedTypes.createPolicy() which just returns the policyOptions object it was passed. The object defines sanitization functions for data, and these functions are expected to return strings. Effectively it is a transparent replacement for the trusted types JavaScript API:

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

Next create a TrustedTypePolicy that defines a createHTML() for transforming an input string into TrustedHTML instances. Commonly implementations of createHTML() use a library such as DOMPurify to sanitize the input as shown below:

const policy = trustedTypes.createPolicy("my-policy", {
  createHTML: (input) => DOMPurify.sanitize(input),
});

Then use this policy object to create a TrustedHTML object from the potentially unsafe input string, and assign the result to the element:

// The potentially malicious string
const untrustedString = "<p>I might be XSS</p><img src='x' onerror='alert(1)'>";

// Create a TrustedHTML instance using the policy
const trustedHTML = policy.createHTML(untrustedString);

// Inject the TrustedHTML (which contains a trusted string)
const element = document.querySelector("#container");
element.innerHTML = trustedHTML;

You can clear the content of an element by setting its content to the empty string. For example, the code below clears the entire contents of a document by setting the body element to a TrustedHTML object for the empty string:

// Create a TrustedHTML instance using the policy
document.body.textContent = policy.createHTML(policy.createHTML(""));

Note that in this case we're setting the element to an empty string, which we know is safe. If we weren't enforcing trusted types we could instead directly assign the empty string:

document.body.textContent = "";

This example uses innerHTML to create a mechanism for logging messages into a box on a web page.

HTML

The HTML is quite simple for our example.

<div class="box">
  <div><strong>Log:</strong></div>
  <div class="log"></div>
</div>

The <div> with the class "box" is just a container for layout purposes, presenting the contents with a box around it. The <div> whose class is "log" is the container for the log text itself.

CSS

The following CSS styles our example content.

.box {
  width: 600px;
  height: 300px;
  border: 1px solid black;
  padding: 2px 4px;
  overflow-y: scroll;
  overflow-x: auto;
}

.log {
  margin-top: 8px;
  font-family: monospace;
}

JavaScript

The example doesn't actually require sanitization/trusted types because we know that the strings will only contain <strong> and <em> elements. However we'll use them anyway, because in a real application you should enforce and use trusted types everywhere.

First we define the tinyfill:

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

Then we create our policy "safe-string-policy" for using with inputs that we know to be safe. This just passes the input through to the output without performing sanitization:

const safeStringPolicy = trustedTypes.createPolicy("safe-string-policy", {
  createHTML: (input) => input,
});

Next we define a log() function that uses this policy.

const logElem = document.querySelector(".log");

function log(msg) {
  const time = new Date();
  const timeStr = `${logElem.innerHTML}${time.toLocaleTimeString()}: ${msg}<br/>`;
  const trustedHTML = safeStringPolicy.createHTML(timeStr);
  logElem.innerHTML = trustedHTML;
}

log("Logging mouse events inside this container…");

The log() function creates the log output by getting the current time from a Date object using toLocaleTimeString(), and building a string with the timestamp and the message text. This string is appended to the original content of the log and then the policy is used to pass the string through our createHTML() "transformation" function. Then the message is assigned to the element with the class "log".

We add a second method that logs information about MouseEvent based events (such as mousedown, click, and mouseenter):

function logEvent(event) {
  const msg = `Event <strong>${event.type}</strong> at <em>${event.clientX}, ${event.clientY}</em>`;
  log(msg);
}

Then we use this as the event handler for a number of mouse events on the box that contains our log:

const boxElem = document.querySelector(".box");

boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);

Result

The resulting content looks like this. You can see output into the log by moving the mouse in and out of the box, clicking in it, and so forth.

• Node.textContent and HTMLElement.innerText
• Element.insertAdjacentHTML()
• Element.outerHTML
• Parsing HTML or XML into a DOM tree: DOMParser
• Serializing a DOM tree into an XML string: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()
• Trusted Types API