What is the innerHTML property and how does it work ?

About

innerHTML is a property of a node element that permits to

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
Rendered by WebCode

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)

1)
InnerHtml 5 no script execution insertion




Discover More
DOM - Child Nodes of a Node

Child Nodes of an element in the dom tree Via child selector, you can select element that are child of another element. The childNodes property of an element returns a collection of child Node....
How to load a script dynamically with Javascript?

This page shows you how you can load a script dynamically with Javascript to load and use it when needed. In short, if you add: a script via an DOM element, it will be executed (via append or insertAdjacentElement)...
Insert Adajcent Illustration
What is InsertAdjacent and InsertAdjacentHTML and how to use them ?

InsertAdjacent is a function that permits to insert a node or a html into the DOM tree relatively to a node at this positions (as a child or sibling)
What is an HTML Fragment ?

A fragment in HTML is a piece of HTML that is intended to be added dynamically into an web page. Via insertAdjacentHTML) The fragment (You could have get it from an AJAX call) Adding it in the...
What is the outerHTML property and how does it work ?

outerHTML is a property of a node element that permits to replace the target element with an HTML fragment innerHTML HTML fragmentInsertAdjacentHTML script elements inserted using outerHTML...



Share this page:
Follow us:
Task Runner