Element.innerHTML
The Element.innerHTML
property sets or gets the HTML syntax describing the element's descendants.
<div>
, <span>
, or <noembed>
node has a child text node that includes the characters (&), (<),
or (>)
, innerHTML
returns these characters as &, < and > respectively. Use Node.textContent
to get a correct copy of these text nodes' contents.Syntax
<var>var content = <var>element</var>.innerHTML;</var>
On return, content
contains the serialized HTML code describing all of the element
's descendants.
element.innerHTML = content;
Removes all of element
's children, parses the content
string and assigns the resulting nodes as children 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 <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,"<") + "</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 considerations
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 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 via 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:
var 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
Specification | Status | Comment |
---|---|---|
DOM Parsing and Serialization The definition of 'Element.innerHTML' in that specification. |
Working Draft | Initial definition |
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.Element.insertAdjacentHTML
- An alternative for innerHTML, allowing you to append the new HTML, instead of replacing it.- 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: innerHTML Property
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/element/innerhtml