*
    Skip to main content

    <#document-main>
  *
    Select language

    <#language>
  *
    Skip to search

    <#q>

mozilla

<//www.mozilla.org/>
Mozilla Developer Network

</en-US/>

  *
    Sign in with Sign in // //
      o
        //Persona

        </en-US/users/signin>
      o
        //GitHub

        </users/github/login/?next=%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2FinnerHTML>

  * Web Platform// </en-US/docs/Web>
    Technologies
      o
        HTML

        </en-US/docs/Web/HTML>
      o
        CSS

        </en-US/docs/Web/CSS>
      o
        JavaScript

        </en-US/docs/Web/JavaScript>
      o
        Graphics

        </en-US/docs/Web/Guide/Graphics>
      o
        APIs / DOM

        </en-US/docs/Web/API>
      o
        Apps

        </en-US/docs/Web/Apps>
      o
        MathML

        </en-US/docs/Web/MathML>
    References & Guides
      o
        Learn the Web

        </en-US/docs/Learn>
      o
        Tutorials

        </en-US/docs/Web/Tutorials>
      o
        References

        </en-US/docs/Web/Reference>
      o
        Developer Guides

        </en-US/docs/Web/Guide>
      o
        Accessibility

        </en-US/docs/Web/Accessibility>
      o
        Demos

        </en-US/demos/>
      o
        ...more docs

        </en-US/docs/Web>
  * Mozilla Docs// </en-US/docs/Zones>
      o
        Add-ons

        </en-US/docs/Mozilla/Add-ons>
      o
        Firefox

        </en-US/docs/Firefox>
      o
        Firefox Marketplace

        </en-US/docs/Mozilla/Marketplace>
      o
        Firefox OS

        </en-US/docs/Firefox_OS>
      o
        Persona

        </en-US/docs/Persona>
  * Developer Tools </en-US/docs/Tools>
  * Demos </en-US/demos/>
  * Connect </en-US/docs/Mozilla/Connect>
  * // </en-US/search>
  *
    Search

    // 
    Search

  * Languages//
      o
        Español

        </es/docs/Web/API/Element/innerHTML>
      o
        Français

        </fr/docs/Web/API/Element/innertHTML>
      o
        日本語

        </ja/docs/Web/API/Element/innerHTML>
      o
        Polski

        </pl/docs/Web/API/Element/innerHTML>
      o
        Português (do Brasil)

        </pt-BR/docs/Web/API/Element/innerHTML>
      o
        中文 (简体)

        </zh-CN/docs/Web/API/Element/innerHTML>
      o
        Add a translation

        </en-US/docs/Web/API/Element/innerHTML$locales>
  * Edit// </en-US/docs/Web/API/Element/innerHTML$edit>
  * Advanced//
    Advanced
      o
        History

        </en-US/docs/Web/API/Element/innerHTML$history>
      o
        Print this page

        <#>

 1.
    MDN

    </en-US>
 2.
    Web technology for developers

    </en-US/docs/Web>
 3.
    Web API Interfaces

    </en-US/docs/Web/API>
 4.
    Element

    </en-US/docs/Web/API/Element>
 5. Element.innerHTML

// //// <#> Your Search Results

//


  Element.innerHTML

by 39 contributors:

  * cvrebert </en-US/profiles/cvrebert>
  * fscholz </en-US/profiles/fscholz>
  * Dattaya </en-US/profiles/Dattaya>
  * teoli </en-US/profiles/teoli>
  * kscarfone </en-US/profiles/kscarfone>
  * vishu_gawli </en-US/profiles/vishu_gawli>
  * biscuitsandtea </en-US/profiles/biscuitsandtea>
  * Sheppy </en-US/profiles/Sheppy>
  * timdown </en-US/profiles/timdown>
  * mathiasbynens </en-US/profiles/mathiasbynens>
  * nzakas </en-US/profiles/nzakas>
  * jaffathecake </en-US/profiles/jaffathecake>
  * PlayMyCode </en-US/profiles/PlayMyCode>
  * </en-US/profiles/ethertank>
  * </en-US/profiles/jswisher>
  * </en-US/profiles/Marcoos>
  * </en-US/profiles/icie>
  * </en-US/profiles/alex.w.y>
  * </en-US/profiles/dbruant>
  * </en-US/profiles/trevorh>
  * </en-US/profiles/MatrixFrog>
  * </en-US/profiles/yonathan>
  * </en-US/profiles/rutsky>
  * </en-US/profiles/Matej%20Lednar>
  * </en-US/profiles/Brettz9>
  * </en-US/profiles/aavindraa>
  * </en-US/profiles/bigbossSNK>
  * </en-US/profiles/patcat88>
  * </en-US/profiles/George3>
  * </en-US/profiles/Potappo>
  * </en-US/profiles/%E5%B7%B4%E5%88%AB%E5%A1%94%E5%B7%A5%E4%BA%BA>
  * </en-US/profiles/Mgjbot>
  * </en-US/profiles/Ptak82>
  * </en-US/profiles/RobG>
  * </en-US/profiles/BenoitL>
  * </en-US/profiles/Nickolay>
  * </en-US/profiles/Dria>
  * </en-US/profiles/Callek>
  * </en-US/profiles/JesseW>

Show all…contributors
/

/Show Sidebar <#show-quick-links>
In This Article//

<#toc>

 1. Syntax <#Syntax>
 2. Example <#Example>
 3. Notes <#Notes>
     1. Security considerations <#Security_considerations>
 4. Specification <#Specification>
 5. See also <#See_also> 

The *|Element.innerHTML|* property sets or gets the HTML syntax
describing the element's descendants.

*Note: *If a |<div>| </en-US/docs/Web/HTML/Element/div>, |<span>|
</en-US/docs/Web/HTML/Element/span>, or |<noembed>|
</en-US/docs/Web/HTML/Element/noembed> node has a child text node that
includes the characters |(&), (<),| or |(>)|, |innerHTML| returns these
characters as &amp, &lt and &gt respectively. Use |Node.textContent|
</en-US/docs/Web/API/Node/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 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>|
</en-US/docs/Web/HTML/Element/body> or |<html>|
</en-US/docs/Web/HTML/Element/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 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 <http://en.wikipedia.org/wiki/cross-site scripting> attack, the result is harmless. HTML5 specifies that a |<script>|
</en-US/docs/Web/HTML/Element/script> tag inserted via |innerHTML| should not execute <http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0>.

However, there are ways to execute JavaScript without using |<script>|
</en-US/docs/Web/HTML/Element/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|
</en-US/docs/Web/API/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. <https://w3c.github.io/DOM-Parsing/#widl-Element-innerHTML> 	Living Standard 	 


    See also

  * |innerDOM| <http://innerdom.sourceforge.net/> - 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.
  * insertAdjacentHTML </en-US/docs/DOM/Element.insertAdjacentHTML> - An
    alternative for innerHTML, allowing you to append the new HTML,
    instead of replacing it.
  * jssaxparser <http://code.google.com/p/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 <http://code.assembla.com/brettz9/subversion/nodes/DOMToString>)
  * Efficiency considerations: On quirksmode <http://www.quirksmode.org/dom/innerhtml.html>
  * MSDN: innerHTML Property <http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx>


    Document Tags and Contributors

// *Tags:* 

  * API </en-US/docs/tag/API>
  * DOM </en-US/docs/tag/DOM>
  * Gecko </en-US/docs/tag/Gecko>
  * Gecko DOM Reference </en-US/docs/tag/Gecko%20DOM%20Reference>
  * NeedsBrowserCompatibility </en-US/docs/tag/NeedsBrowserCompatibility>
  * Property </en-US/docs/tag/Property>
  * Reference </en-US/docs/tag/Reference>
  * Référence </en-US/docs/tag/R%C3%A9f%C3%A9rence>

//*Contributors to this page:* cvrebert </en-US/profiles/cvrebert>,
fscholz </en-US/profiles/fscholz>, Dattaya </en-US/profiles/Dattaya>,
teoli </en-US/profiles/teoli>, kscarfone </en-US/profiles/kscarfone>,
vishu_gawli </en-US/profiles/vishu_gawli>, biscuitsandtea
</en-US/profiles/biscuitsandtea>, Sheppy </en-US/profiles/Sheppy>,
timdown </en-US/profiles/timdown>, mathiasbynens
</en-US/profiles/mathiasbynens>, nzakas </en-US/profiles/nzakas>,
jaffathecake </en-US/profiles/jaffathecake>, PlayMyCode
</en-US/profiles/PlayMyCode>, ethertank </en-US/profiles/ethertank>,
jswisher </en-US/profiles/jswisher>, Marcoos </en-US/profiles/Marcoos>,
icie </en-US/profiles/icie>, alex.w.y </en-US/profiles/alex.w.y>,
dbruant </en-US/profiles/dbruant>, trevorh </en-US/profiles/trevorh>,
MatrixFrog </en-US/profiles/MatrixFrog>, yonathan
</en-US/profiles/yonathan>, rutsky </en-US/profiles/rutsky>, Matej
Lednar </en-US/profiles/Matej%20Lednar>, Brettz9
</en-US/profiles/Brettz9>, aavindraa </en-US/profiles/aavindraa>,
bigbossSNK </en-US/profiles/bigbossSNK>, patcat88
</en-US/profiles/patcat88>, George3 </en-US/profiles/George3>, Potappo
</en-US/profiles/Potappo>, 巴别塔工人
</en-US/profiles/%E5%B7%B4%E5%88%AB%E5%A1%94%E5%B7%A5%E4%BA%BA>, Mgjbot
</en-US/profiles/Mgjbot>, Ptak82 </en-US/profiles/Ptak82>, RobG
</en-US/profiles/RobG>, BenoitL </en-US/profiles/BenoitL>, Nickolay
</en-US/profiles/Nickolay>, Dria </en-US/profiles/Dria>, Callek
</en-US/profiles/Callek>, JesseW </en-US/profiles/JesseW>
//*Last updated by:* cvrebert </en-US/profiles/cvrebert>, Sep 2, 2015,
2:43:54 AM
/

/Hide Sidebar <#quick-links>
See also

 1. *|Element| </en-US/docs/Web/API/Element>*
 2.
    /

    /*Properties* <#>
     1. |Element.accessKey| </en-US/docs/Web/API/Element/accessKey>
     2. |Element.attributes| </en-US/docs/Web/API/Element/attributes>
     3. |ParentNode.childElementCount|
        </en-US/docs/Web/API/ParentNode/childElementCount>
     4. |ParentNode.children| </en-US/docs/Web/API/ParentNode/children>
     5. |Element.classList| </en-US/docs/Web/API/Element/classList>
     6. |Element.className| </en-US/docs/Web/API/Element/className>
     7. |Element.clientHeight| </en-US/docs/Web/API/Element/clientHeight>
     8. |Element.clientLeft| </en-US/docs/Web/API/Element/clientLeft>
     9. |Element.clientTop| </en-US/docs/Web/API/Element/clientTop>
    10. |Element.clientWidth| </en-US/docs/Web/API/Element/clientWidth>
    11. |ParentNode.firstElementChild|
        </en-US/docs/Web/API/ParentNode/firstElementChild>
    12. |Element.id| </en-US/docs/Web/API/Element/id>
    13. /|Element.innerHTML|/
    14. |ParentNode.lastElementChild|
        </en-US/docs/Web/API/ParentNode/lastElementChild>
    15. |Element.name| </en-US/docs/Web/API/Element/name>
    16. |NonDocumentTypeChildNode.nextElementSibling|
        </en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling>
    17. //|Element.onwheel| </en-US/docs/Web/API/Element/onwheel>
    18. |Element.outerHTML| </en-US/docs/Web/API/Element/outerHTML>
    19. |NonDocumentTypeChildNode.previousElementSibling|
        </en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling>
    20. |Element.scrollHeight| </en-US/docs/Web/API/Element/scrollHeight>
    21. |Element.scrollLeft| </en-US/docs/Web/API/Element/scrollLeft>
    22. //|Element.scrollLeftMax|
        </en-US/docs/Web/API/Element/scrollLeftMax>
    23. |Element.scrollTop| </en-US/docs/Web/API/Element/scrollTop>
    24. //|Element.scrollTopMax| </en-US/docs/Web/API/Element/scrollTopMax>
    25. |Element.scrollWidth| </en-US/docs/Web/API/Element/scrollWidth>
    26. //|Element.tabStop| </en-US/docs/Web/API/Element/tabStop>
    27. |Element.tagName| </en-US/docs/Web/API/Element/tagName>
 3.
    /

    /*Methods* <#>
     1. //|Element.closest()| </en-US/docs/Web/API/Element/closest>
     2. |Element.getAttribute()| </en-US/docs/Web/API/Element/getAttribute>
     3. |Element.getAttributeNode()|
        </en-US/docs/Web/API/Element/getAttributeNode>
     4. |Element.getAttributeNodeNS()|
        </en-US/docs/Web/API/Element/getAttributeNodeNS>
     5. |Element.getAttributeNS()|
        </en-US/docs/Web/API/Element/getAttributeNS>
     6. |Element.getBoundingClientRect()|
        </en-US/docs/Web/API/Element/getBoundingClientRect>
     7. |Element.getClientRects()|
        </en-US/docs/Web/API/Element/getClientRects>
     8. |Element.getElementsByClassName()|
        </en-US/docs/Web/API/Element/getElementsByClassName>
     9. |Element.getElementsByTagName()|
        </en-US/docs/Web/API/Element/getElementsByTagName>
    10. |Element.getElementsByTagNameNS()|
        </en-US/docs/Web/API/Element/getElementsByTagNameNS>
    11. |Element.hasAttribute()| </en-US/docs/Web/API/Element/hasAttribute>
    12. |Element.hasAttributeNS()|
        </en-US/docs/Web/API/Element/hasAttributeNS>
    13. |Element.hasAttributes()|
        </en-US/docs/Web/API/Element/hasAttributes>
    14. |Element.insertAdjacentHTML()|
        </en-US/docs/Web/API/Element/insertAdjacentHTML>
    15. |Element.matches()| </en-US/docs/Web/API/Element/matches>
    16. |Element.querySelector()|
        </en-US/docs/Web/API/Element/querySelector>
    17. |Element.querySelectorAll()|
        </en-US/docs/Web/API/Element/querySelectorAll>
    18. //|ChildNode.remove()| </en-US/docs/Web/API/ChildNode/remove>
    19. |Element.removeAttribute()|
        </en-US/docs/Web/API/Element/removeAttribute>
    20. |Element.removeAttributeNode()|
        </en-US/docs/Web/API/Element/removeAttributeNode>
    21. |Element.removeAttributeNS()|
        </en-US/docs/Web/API/Element/removeAttributeNS>
    22. //|Element.requestFullscreen()|
        </en-US/docs/Web/API/Element/requestFullScreen>
    23. //|Element.requestPointerLock()|
        </en-US/docs/Web/API/Element/requestPointerLock>
    24. //|Element.scrollIntoView()|
        </en-US/docs/Web/API/Element/scrollIntoView>
    25. |Element.setAttribute()| </en-US/docs/Web/API/Element/setAttribute>
    26. |Element.setAttributeNode()|
        </en-US/docs/Web/API/Element/setAttributeNode>
    27. |Element.setAttributeNodeNS()|
        </en-US/docs/Web/API/Element/setAttributeNodeNS>
    28. |Element.setAttributeNS()|
        </en-US/docs/Web/API/Element/setAttributeNS>
    29. //|Element.setCapture()| </en-US/docs/Web/API/Element/setCapture>
 4.
    /

    /*Inheritance:* <#>
     1. |Node| </en-US/docs/Web/API/Node>
     2. |EventTarget| </en-US/docs/Web/API/EventTarget>
 5.
    /

    /*Related pages for DOM* <#>
     1. |Attr| </en-US/docs/Web/API/Attr>
     2. |ByteString| </en-US/docs/Web/API/ByteString>
     3. |CDATASection| </en-US/docs/Web/API/CDATASection>
     4. |CharacterData| </en-US/docs/Web/API/CharacterData>
     5. |ChildNode| </en-US/docs/Web/API/ChildNode>
     6. |Comment| </en-US/docs/Web/API/Comment>
     7. |CustomEvent| </en-US/docs/Web/API/CustomEvent>
     8. |DOMConfiguration| </en-US/docs/Web/API/DOMConfiguration>
     9. |DOMError| </en-US/docs/Web/API/DOMError>
    10. |DOMErrorHandler| </en-US/docs/Web/API/DOMErrorHandler>
    11. |DOMException| </en-US/docs/Web/API/DOMException>
    12. |DOMImplementation| </en-US/docs/Web/API/DOMImplementation>
    13. |DOMImplementationList| </en-US/docs/Web/API/DOMImplementationList>
    14. |DOMImplementationRegistry|
        </en-US/docs/Web/API/DOMImplementationRegistry>
    15. |DOMImplementationSource|
        </en-US/docs/Web/API/DOMImplementationSource>
    16. |DOMLocator| </en-US/docs/Web/API/DOMLocator>
    17. |DOMObject| </en-US/docs/Web/API/DOMObject>
    18. |DOMParser| </en-US/docs/Web/API/DOMParser>
    19. |DOMPoint| </en-US/docs/Web/API/DOMPoint>
    20. |DOMRect| </en-US/docs/Web/API/DOMRect>
    21. |DOMString| </en-US/docs/Web/API/DOMString>
    22. |DOMTimeStamp| </en-US/docs/Web/API/DOMTimeStamp>
    23. |DOMTokenList| </en-US/docs/Web/API/DOMTokenList>
    24. |DOMUserData| </en-US/docs/Web/API/DOMUserData>
    25. |Document| </en-US/docs/Web/API/Document>
    26. |DocumentFragment| </en-US/docs/Web/API/DocumentFragment>
    27. |DocumentType| </en-US/docs/Web/API/DocumentType>
    28. |ElementTraversal| </en-US/docs/Web/API/ElementTraversal>
    29. |Entity| </en-US/docs/Web/API/Entity>
    30. |EntityReference| </en-US/docs/Web/API/EntityReference>
    31. |Event| </en-US/docs/Web/API/Event>
    32. |EventTarget| </en-US/docs/Web/API/EventTarget>
    33. |HTMLCollection| </en-US/docs/Web/API/HTMLCollection>
    34. |MutationObserver| </en-US/docs/Web/API/MutationObserver>
    35. |Node| </en-US/docs/Web/API/Node>
    36. |NodeFilter| </en-US/docs/Web/API/NodeFilter>
    37. |NodeIterator| </en-US/docs/Web/API/NodeIterator>
    38. |NodeList| </en-US/docs/Web/API/NodeList>
    39. |NonDocumentTypeChildNode|
        </en-US/docs/Web/API/NonDocumentTypeChildNode>
    40. |ProcessingInstruction| </en-US/docs/Web/API/ProcessingInstruction>
    41. |PromiseResolver| </en-US/docs/Web/API/PromiseResolver>
    42. |Range| </en-US/docs/Web/API/Range>
    43. |Selection| </en-US/docs/Web/API/Selection>
    44. |Text| </en-US/docs/Web/API/Text>
    45. |TextDecoder| </en-US/docs/Web/API/TextDecoder>
    46. |TextEncoder| </en-US/docs/Web/API/TextEncoder>
    47. |TimeRanges| </en-US/docs/Web/API/TimeRanges>
    48. |TreeWalker| </en-US/docs/Web/API/TreeWalker>
    49. |TypeInfo| </en-US/docs/Web/API/TypeInfo>
    50. |USVString| </en-US/docs/Web/API/USVString>
    51. |UserDataHandler| </en-US/docs/Web/API/UserDataHandler>
    52. |XMLDocument| </en-US/docs/Web/API/XMLDocument>

© 2005-2015 Mozilla Developer Network and individual contributors
Content is available under these licenses
</en-US/docs/MDN/About#Copyrights_and_licenses> · About MDN
</docs/MDN/About> · Terms <//www.mozilla.org/about/legal/terms/mozilla>
· Privacy <//www.mozilla.org/privacy/websites/> · Cookies
<//www.mozilla.org/privacy/websites/#cookies> · Contribute to the code
<//github.com/mozilla/kuma>

Other languages: