innerHTML

Lesson 11 of 13 in Coddy's JavaScript DOM Methods course.

The property innerHTML sets or retrieves the complete HTML content (including child elements) within an element. This is useful for dynamically updating the content of a web page section.

element.innerHTML = "<b>Example Text !!</b>";

Challenge

Easy

You are given HTML code that contains div with an ID content .

Using JavaScript only, change the content of this element div:

Retrieve the div element using getElementById function.
Set HTML content to "<b>Updated Content</b>".

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <div id="content">Original Content</div>
        <script src="script.js"></script>
    </body>
</html>

All lessons in JavaScript DOM Methods

1Introduction

Introduction Document Object Model

2DOM Methods I

getElementById Modify Element Style getElementsByClassName Loop Through and Manipulate getElementsByTagName querySelector

3DOM Methods II

querySelectorAll addEventListenerinnerHTMLcreateElement and appendChild classList toggle