About
innerHTML is a property of a node element that permits to
- set the whole descendants of this node
- with an HTML fragment
outerHTML replaces the entire target element with the returned content while innerHTML puts the content inside the target element .
Example
let htmlFragment = "<p>Replacing the whole body node content with a paragraph</p>";
document.body.innerHTML += htmlFragment
If you want to insert a HTML fragment and not delete the actual tree, you can use InsertAdjacentHTML
Security
script elements inserted using innerHTML do not execute when they are inserted. 1)