We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

The Element property innerHTML property is used to get or set a string representing serialized HTML describing the element's descendants.

Note: If a <div>, <span>, or <noembed> node has a child text node that includes the characters (&), (<), or (>), innerHTML returns these characters as the HTML entities "&amp;", "&lt;" and "&gt;" respectively. Use Node.textContent to get a raw copy of these text nodes' contents.

To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML().


const content = element.innerHTML;

element.innerHTML = htmlString;


A DOMString 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 string htmlString.


An attempt was made to set the value of innerHTML using a string which is not properly-formed HTML.
An attempt was made to insert the HTML into a node whose parent is a Document.


    <div id="txt">
      <script     id="txt0"> x=0> </script>
        <noembed    id="txt1"> 1   </noembed>
        <noframes   id="txt2"> 2   </noframes>
        <noscript   id="txt3"> 3   </noscript>
        <div        id="txt4"> 4   </div>
          <noscript id="txt5"> 5   </noscript>
        <span       id="txt6"> 6   </span>

      <div id="innerHTMLtxt"></div>
    <div id="textContenttxt"><div>

    for (let i = 0; i < 7; i++) { 
      x = "txt" + i;
      document.getElementById(x).firstChild.nodeValue = '&<>'

    document.getElementById("innerHTMLtxt").textContent =
    document.getElementById("textContenttxt").textContent =
// HTML:
// <div id="d"><p>Content</p>
// <p>Further Elaborated</p>
// </div>

const d = document.getElementById("d");

// the string "<p>Content</p><p>Further Elaborated</p>"
// is dumped to the console window


This property provides a simple way to completely replace the contents of an element. For example, the entire contents of the document body can be deleted by:

document.body.innerHTML = "";  // Replaces body content with an empty string.

The innerHTML property of many types of elements—including <body> or <html>—can be returned or replaced. It can also be used to view the source of a page that has been modified dynamically:

// Copy and paste into address bar as a single line
javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";

This property was initially implemented by web browsers, then specified by the WHATWG and W3C in HTML5. Old implementations may not all implement it exactly the same way. For example, when entering text into a multi-line text entry (textarea element), Internet Explorer changes the value attribute of the innerHTML property of the textarea element, but Gecko browsers do not.

Security considerations

It is not uncommon to see innerHTML used to insert text in a web page. This comes with a security risk.

const name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a <script> tag inserted with innerHTML should not execute.

However, there are ways to execute JavaScript without using <script> elements, so there is still a security risk whenever you use innerHTML to set strings over which you have no control. For example:

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

For that reason, it is recommended you not use innerHTML when inserting plain text; instead, use Node.textContent. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.


Specification Status Comment
DOM Parsing and Serialization
The definition of 'Element.innerHTML' in that specification.
Working Draft Initial definition

See also