Please make sure that the HTML content should be in a string format and must contain valid HTML tags. All the elements specified in the HTML content will act as child elements and the main element will act as the parent element.
In the following example, we have 2 elements, textarea and button. I am going to demonstrate here 2 scenarios of setting a text as innerHTML of an element. In the first scenario, we will enter some text in the textarea with valid HTML tags. As we are typing, we will set it as the innerHTML of an element.
In the second scenario, we have one hard-coded string with valid HTML tags. Upon click of a button, we will set it as the innerHTML of an element. The output of both scenarios will be shown on the screen. Please have a look over the code example and the steps given below.
HTML & CSS
We have 3 elements in the HTML file (div, button, and textarea).
The innerText for the button element is “ADD”.
The div element with a class of container is just a wrapper for the textarea element and output div element.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.