Which property can be used to modify the content of HTML element ?

Last Updated : 05 Jun, 2023

In this article, we will see the property that can be used to modify the content of HTML element. To modify the content of HTML element, we will use HTML DOM innerHTML Property. The innerHTML Property is used to set or return the content of HTML element.

Syntax:

It returns the content of an element.

Object.innerHTML

It is used to set the content of an element.

Object.innerHTML = value

Approach: In the below example, we will create a div element containing an id “content” and an input button element. When the user clicks on the button, the JavaScript function is called. Inside the JavaScript function, first, select the div element using the document.getElementById() selector and use the innerHTML property to modify the content of the div element.

Example: In this example, we will use innerHTML property to modify the content.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Which property can be used to modify
        the content of the HTML element?
    </title>
    <style>
        h1 {
            color: green;
        }
 
        #content {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>
            Which property can be used to modify
            <br>the content of HTML element?
        </h3>
        <div id="content">
            Welcome to GeeksforGeeks
        </div>
        <br>
        <input type="button" value="Change Content"
               onclick="myGeeks()">
    </center>
    <script>
        function myGeeks() {
            document.getElementById("content").innerHTML
                = "A computer science portal for geeks";
        }
    </script>
</body>
</html>