freeCodeCamp/guide/english/javascript/html-dom-innerhtml-property/index.md

title
HTML Dom Innerhtml Property

HTML Dom Innerhtml Property

The innerHTML prop return the HTML content inside a selected element and also let you define a new HTML content.

GET ELEMENT CONTENT

<div id="demo">
  <p>Demo</p>
</div>

var element = document.getElementById("demo");
console.log(element.innerHTML) //logs <p>Demo</p>

SET ELEMENT CONTENT

<div id="demo"></div>

var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";

The HTML now will be like

<div id="demo">
  <div>Demo</div>
</div>

SECURITY CONSIDERATIONS

The value that's set to innerHTML should come from trusted sources, since Javascript will put anything inside that element and it will be run as plain HTML.

Example:

Setting a "<script>alert();</script>" value will cause the Javascript "alert()" function to be fired:

var element = document.getElementById("demo");

element.innerHTML = "<script>alert();</script>";

This type of attack is called Cross Site Scripting, or XSS for short.

This is one of the most common ways of committing an XSS attack. If you want to learn a little bit more and learn to defend against it, check out this resource