The **`innerHTML` property** is used to set and get the HTML content within the element.

# Syntax 

## Get HTML Content

``` 
let htmlString = element.innerHTML;
``` 
## Set HTML content

```
element.innerHTML = htmlString;
```

When we set the `innerHTML` of an element, all the child nodes of the element are #key# replaced with the passed HTML content :The passed HTML String is parsed internally. #key#.

# Example 

<html>
 <head>
 </head>
 <body>
    <div id="content">
      <b>When we set the innerHTML of an element, all the child nodes of the element are replaced with the passed HTML content(<i>The passed HTML String is parsed internally </i>).</b>
    </div>
    <button id="getHTML"> Get HTML </button> 
    <button id="setHTML"> Set HTML </button> 
 </body>
</html>

let getHTML  = document.getElementById('getHTML');
let setHTML  = document.getElementById('setHTML');
let content = document.getElementById('content');
getHTML.addEventListener('click', (ev)=>{
    let innerHTML = content.innerHTML;
    console.log(innerHTML);
});

setHTML.addEventListener('click', (ev)=>{
    let HTMLString =  "<b> This text is inserted by setting the element.innerHTML. At </b>" + new Date();
    content.innerHTML = HTMLString;
});

#content {
    font-size: 23px;
}
button {
    margin: 10px;
    padding: 10px;
    font-size: 15px;
    
}

codemirror

console

In the code above, we have created a `div` and added some content to it. 

* We access the `innerHTML` property of the `div` element to get the HTML of the `div`. 

* We set the value to the `innerHTML` property of the `div` element to set the HTML of the `div`. 
---

# Points to be noted

1. When we set the following: 

```
element.innerHTML = ""
```

This removes all the child nodes of the element.

---

2. When we set the following: 

```
document.body.innerHTML = "";
```
This erases the entire body of the webpage.

----

3. When we get the HTML content through the `innerHTML` property, if the HTML String contains the `&, <, >` character, then it will be replaced by the `&amp;`, `&lt;`, `&gt;` entities, respectively.

```
 & - &amp; 
 < - &lt;
 > - &gt;
```

---

4. The `<script>` tag inserted with `innerHTML` will not execute. 


```
div.innerHTML = <script> alert(1) </script>
```

The code above will not be executed or added as a string to the `div`.


What is innerHTML in JavaScript?

Syntax

Get HTML Content

Set HTML content

Example

Points to be noted