Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute identifies the HTML element, and the innerHTML property defines the HTML content inside that element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

After an HTML document has loaded, utilizing document.write() will remove all existing HTML content.

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button type=”button” onclick=”document.write(5 + 6)”>Try it</button>

</body>
</html>

Reserve the use of the document.write() method solely for testing purposes.