DOM: Element.innerHTML

1. property 
2. gets or sets the HTML or XML markup contained within the element.
3. To set or return the HTML content of an element, use the innerHTML property.

+1. 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 "&", "<" and ">" respectively. Use Node.textContent to get a raw copy of these text nodes' contents.

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

 

[Syntax]

Return the innerHTML property:

HTMLElementObject.innerHTML

Set the innerHTML property:

HTMLElementObject.innerHTML = text

: 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.

[Return Value]

A String, representing the HTML content of an element.

 

[What exactly happens when you set value of innerHTML?]

Doing so causes the user agent to follow these steps:

1. The specified value is parsed as HTML or XML (based on the document type), 
   resulting in a DocumentFragment object representing the new set of DOM nodes for the new elements.
2. If the element whose contents are being replaced is an element, then the element's content attribute is replaced with the new DocumentFragment created in step 1.
3. For all other elements, the element's contents are replaced with the nodes in the new DocumentFragment.

Doing so causes the user agent to follow these steps:

1. The specified value is parsed as HTML or XML (based on the document type), 
   resulting in a DocumentFragment object representing the new set of DOM nodes for the new elements.
2. If the element whose contents are being replaced is an element, then the element's content attribute is replaced with the new DocumentFragment created in step 1.
3. For all other elements, the element's contents are replaced with the nodes in the new DocumentFragment.

 

[Security considerations]

: There is a potential security risk for using innerHTML to insert text into a web page to become an attack vector on a site.

  - HTML5 specifies that a <script>tag inserted with innerHTML should not execute. However, there are ways to execute JavaScript without using it.
  - For that reason, when inserting plain text; instead, use Node.textContent. This doesn't parse the passed content as HTML, but instead inserts it as raw text.
: If your project is one that will undergo any form of security review, using innerHTML most likely will result in your code being rejected.

: There is a potential security risk for using innerHTML to insert text into a web page to become an attack vector on a site.

  - HTML5 specifies that a <script>tag inserted with innerHTML should not execute. However, there are ways to execute JavaScript without using it.
  - For that reason, when inserting plain text; instead, use Node.textContent. This doesn't parse the passed content as HTML, but instead inserts it as raw text.
: If your project is one that will undergo any form of security review, using innerHTML most likely will result in your code being rejected.

 

---

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

https://www.w3schools.com/jsref/prop_html_innerhtml.asp