Element.innerHTML

  • Revision slug: DOM/element.innerHTML
  • Revision title: element.innerHTML
  • Revision id: 64864
  • Created:
  • Creator: Marcoos
  • Is current revision? No
  • Comment Reverted to earlier version; one or more formatting changes

Revision Content

Summary

innerHTML sets or gets the HTML syntax describing the element's descendants.

Note: If a {{ HTMLElement("div") }}, {{ HTMLElement("span") }}, or {{ HTMLElement("noembed") }} node has a child text node that includes the characters (&), (<), or (>), innerHTML returns these characters as &amp, &lt and &gt respectively. Use {{ domxref("element.textContent") }} to get a correct copy of these text nodes' contents.

Syntax

var content = element.innerHTML;

On return, content contains the serialized HTML code describing all of the element's descendants.

 element.innerHTML = content;

Removes all of element's descendants, parses the content string and assigns the resulting nodes as descendants of the element.

Example

<html>
<head></head>
<body>
 <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>
   <div>
     <noscript id="txt5"> 5   </noscript>
   </div>
   <span       id="txt6"> 6   </span>
 </div>
 <div id="innerHTMLtxt"></div>
<div id="textContenttxt"><div>
<script> 
  for (i=0;i<7;i++){ 
    x="txt"+i; 
    document.getElementById(x).firstChild.nodeValue='&<>'
  }

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

d = document.getElementById("d");
dump(d.innerHTML);

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

Notes

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 {{ HTMLElement("body") }} or {{ HTMLElement("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 text is entered into a text input, Internet Explorer changes the value attribute of the input's innerHTML property but Gecko browsers do not.

Security consideration

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

var name = "John";
// assuming el is an HTML DOM element
el.innerHTML = name; // harmless

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // alerts the text which is annoying and not really what was expected.

This is a toy example, but sometimes, the inserted text comes from some user input, later stored in a database, < and > have not been escaped and the text is displayed to other visitors. In that case, anyone can insert a script and use it to do worse than a alert, like cookie theft, for instance. This attack is called cross-site scripting.

When only dealing with text, it is recommended to not use innerHTML, but rather textContent which will not interpret the passed string as HTML, but plain text.

Specification

See also

  • innerDOM - For those wishing to adhere to standards, here is one set of JavaScript functions offering to serialize or parse XML so as to set element contents defined as string(s) via the DOM or getting element contents obtained from the DOM as a string.
  • jssaxparser - A more robust (though heavier) solution than innerDOM (supports parsing with namespaces, single-quoted attributes, CDATA sections, etc.) is this SAX2 parser when used with its DOM content handler. (Offers String to DOM; DOM to String is significantly easier)
  • Efficiency considerations: On quirksmode

    {{ MSDN("ms533897", "innerHTML Property") }}

    {{ languages( { "fr": "fr/DOM/element.innerHTML", "ja": "ja/DOM/element.innerHTML", "pl": "pl/DOM/element.innerHTML" } ) }}

Revision Source

<h2 id="Summary" name="Summary">Summary</h2>
<p><code>innerHTML</code> sets or gets the HTML syntax describing the element's descendants.</p>
<div class="note"><strong>Note: </strong>If a {{ HTMLElement("div") }}, {{ HTMLElement("span") }}, or {{ HTMLElement("noembed") }} node has a child text node that includes the characters <code>(&amp;), (&lt;),</code> or <code>(&gt;)</code>, <code>innerHTML</code> returns these characters as &amp;amp, &amp;lt and &amp;gt respectively. Use {{ domxref("element.textContent") }} to get a correct copy of these text nodes' contents.</div>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval"><em>var content</em> = <em>element</em>.innerHTML;</pre>
<p>On return, <code>content</code> contains the serialized HTML code describing all of the <code>element</code>'s descendants.</p>
<pre class="eval"><em> element</em>.innerHTML = content;</pre>
<p>Removes all of <code>element</code>'s descendants, parses the <code>content</code> string and assigns the resulting nodes as descendants of the <code>element</code>.</p><h2 id="Example" name="Example">Example</h2>
<pre class="brush: js">&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
 &lt;div          id="txt"&gt;
   &lt;script     id="txt0"&gt; x=0 &lt;/script&gt;
   &lt;noembed    id="txt1"&gt; 1   &lt;/noembed&gt;
   &lt;noframes   id="txt2"&gt; 2   &lt;/noframes&gt;
   &lt;noscript   id="txt3"&gt; 3   &lt;/noscript&gt;
   &lt;div        id="txt4"&gt; 4   &lt;/div&gt;
   &lt;div&gt;
     &lt;noscript id="txt5"&gt; 5   &lt;/noscript&gt;
   &lt;/div&gt;
   &lt;span       id="txt6"&gt; 6   &lt;/span&gt;
 &lt;/div&gt;
 &lt;div id="innerHTMLtxt"&gt;&lt;/div&gt;
&lt;div id="textContenttxt"&gt;&lt;div&gt;
&lt;script&gt; 
  for (i=0;i&lt;7;i++){ 
    x="txt"+i; 
    document.getElementById(x).firstChild.nodeValue='&amp;&lt;&gt;'
  }

document.getElementById("innerHTMLtxt").textContent=document.getElementById("txt").innerHTML
document.getElementById("textContenttxt").textContent=document.getElementById("txt").textContent
&lt;/script&gt;
&lt;body&gt;
&lt;/html&gt;</pre>
<pre class="brush: js">// HTML:
// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;
// &lt;p&gt;Further Elaborated&lt;/p&gt;
// &lt;/div&gt;

d = document.getElementById("d");
dump(d.innerHTML);

// the string "&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;"
// is dumped to the console window
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>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:</p>
<pre class="brush: js">document.body.innerHTML = "";  // Replaces body content with an empty string.
</pre>
<p>The <code>innerHTML</code> property of many types of elements—including {{ HTMLElement("body") }} or {{ HTMLElement("html") }}—can be returned or replaced. It can also be used to view the source of a page that has been modified dynamically:</p>
<pre class="brush: js">// Copy and paste into address bar as a single line
javascript:"&lt;pre&gt;"+document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") + "&lt;/pre&gt;";
</pre>
<p>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 text is entered into a text input, Internet Explorer changes the value attribute of the input's <code>innerHTML</code> property but Gecko browsers do not.</p>
<h3 id="Security_consideration">Security consideration</h3>
<p>It is not uncommon to see <code>innerHTML</code> used to insert text in a web page. This comes with a security risk.</p>
<pre class="brush: js">var name = "John";
// assuming el is an HTML DOM element
el.innerHTML = name; // harmless

// ...

name = "&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;";
el.innerHTML = name; // alerts the text which is annoying and not really what was expected.
</pre>
<p>This is a toy example, but sometimes, the inserted text comes from some user input, later stored in a database, &lt; and &gt; have not been escaped and the text is displayed to other visitors. In that case, anyone can insert a script and use it to do worse than a alert, like <a class=" external" href="http://en.wikipedia.org/wiki/HTTP_cookie#Cookie_theft_and_session_hijacking">cookie theft</a>, for instance. This attack is called <a class=" external" href="http://en.wikipedia.org/wiki/Cross-site_scripting">cross-site scripting</a>.</p>
<p>When only dealing with text, it is recommended to not use innerHTML, but rather <a href="/En/DOM/Node.textContent" title="En/DOM/Node.textContent">textContent</a> which will not interpret the passed string as HTML, but plain text.</p>
<h2 id="Specification" name="Specification">Specification</h2>
<ul> <li>W3C's HTML 5 <code>innerHTML</code> for <a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">HTML documents</a></li> <li>W3C's HTML 5 <code>innerHTML</code> for <a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1">XHTML documents</a></li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul> <li><code><a class="external" href="http://innerdom.sourceforge.net/">innerDOM</a></code> - For those wishing to adhere to standards, here is one set of JavaScript functions offering to serialize or parse XML so as to set element contents defined as string(s) via the DOM or getting element contents obtained from the DOM as a string.</li> <li><a class="external" href="http://code.google.com/p/jssaxparser/" title="http://code.google.com/p/jssaxparser/">jssaxparser</a> - A more robust (though heavier) solution than innerDOM (supports parsing with namespaces, single-quoted attributes, CDATA sections, etc.) is this SAX2 parser when used with its DOM content handler. (Offers String to DOM; DOM to String is <a class="external" href="http://code.assembla.com/brettz9/subversion/nodes/DOMToString" title="http://code.assembla.com/brettz9/subversion/nodes/DOMToString">significantly easier</a>)</li> <li>Efficiency considerations: On <a class="external" href="http://www.quirksmode.org/dom/innerhtml.html" title="http://www.quirksmode.org/dom/innerhtml.html">quirksmode</a> <p>{{ MSDN("ms533897", "innerHTML Property") }}</p> <p>{{ languages( { "fr": "fr/DOM/element.innerHTML", "ja": "ja/DOM/element.innerHTML", "pl": "pl/DOM/element.innerHTML" } ) }}</p> </li>
</ul>
Revert to this revision