Note that we’re saying the “HTML content” of an element. That means if the target element should have a bunch of other HTML elements, we can simply use this property and add those HTML elements directly as the content of the target element.
For example, if you have an <ol> element and that needs 3 <li> items with a text content for each, we can easily write these items in a string value and assign it to the innerHTML property.
The browsers then interpret the string value and render the result accurately on the page.
Note: be careful when using this property, though! If this property takes its value from your audiences (users), then they might write some malicious codes and assign it to this property, which might lead to a break on your page or, even worse, the server! You can use the innerText property though if you want to take inputs from users and render it on the page without worrying about the potential exploitation!
Element innerHTML Property Syntax:
element.innerHTML; element.innerHTML = “newValue”;
Element innerHTML Property Input Value
The value we set for this property is a string value that contains the HTML content that we want to set for the target HTML element.
Element innerHTML Property Return Value
The return value of this property is a string value that contains the HTML content of the target element.