What is innerHTML in JavaScript?

innerHTML allows you to get and set the contents of an HTML element as a string.

For example, if this is your div:

<div id="my-div">
  <span>I am just a span inside a div!</span>
</div>

Then if you get its contents with innerHTML like so:

const contents = document.getElementById('my-div').innerHTML;

console.log(contents); // <span>I am just a span inside a div!</span>

And you can also set new contents with innerHTML:

document.getElementById('my-div').innerHTML = '<button>I am just a button inside a div!</button>';

const newContents = document.getElementById('my-div').innerHTML;

console.log(newContents); // <button>I am just a button inside a div!</button>