Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
Like Article
  • Last Updated : 13 Jan, 2022

In this article, we will see the property that can be used for 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 user click on button, the JavaScript function called. Inside the JavaScript function, first select the div element using document.getElementById() selector and use innerHTML property to modify the content of div element.

Example:

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>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!