HTML DOM innerHTML Property

Last Updated : 11 Sep, 2024

The innerHTML property sets or returns the HTML content (inner HTML) of an element. It allows you to manipulate the inner content, including HTML tags, by assigning new HTML strings or retrieving existing content, making it useful for dynamic updates on web pages.

Syntax

It returns the innerHTML Property.

Object.innerHTML

It is used to set the innerHTML property.

Object.innerHTML = value

Where,

value: It represents the text content of the HTML element.

Return Value: This property returns a string that represents the HTML content of an element.

Example 1: This example shows how to change the content of the paragraph tag using the innerHTML property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM innerHTML Property
    </title>
</head>

<body style="text-align: center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        DOM innerHTML Property
    </h2>
    <p id="p">GeeksforGeeks</p>


    <button onclick="geek()">Click me!</button>
    <script>
        function geek() {
            document.getElementById("p").innerHTML =
                "A computer science portal for geeks.";
        }
    </script>
</body>

</html>

Output:

innerHTML Property

Example 2: This example shows how to get the value of the paragraph tag using the innerHTML property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM innerHTML Property
    </title>
</head>

<body style="text-align: center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        DOM innerHTML Property
    </h2>
    <p id="P">A computer science portal for geeks.</p>


    <button onclick="geek()">Try it</button>
    <p id="p"></p>

    <script>
        function geek() {
            let x = document.getElementById("P").innerHTML;
            document.getElementById("p").innerHTML = x;
            document.getElementById("p").style.color = "green";
        }
    </script>
</body>

</html>

Output:

innerHTML Property

Supported Browsers: The browser supported by DOM innerHTML property are listed below:

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

HTML DOM getAttribute() Method

The HTML DOM getAttribute() method is used to retrieve the value of a specified attribute from an HTML element. It returns the attribute's value as a string or null if the attribute doesn't exist.Note: It will return a null or an empty string if the specified attribute doesn't exist.SyntaxObject.get

HTML DOM parentElement Property

The DOM parentElement property is used to return the parent element of a particular child element. It is a read-only property. The parentElement and parentNode properties are similar and the only difference is the parentElement property returns null if the parent node is not an element. Syntax: node

HTML DOM previousSibling Property

The previousSibling property is used to return the previous node of the specified node as Node object or null if the specified node is the first in the list. It is a read-only property. Syntax: node.previousSibling Return value: This property returns a previous sibling of the specified node or null

HTML DOM innerText Property

The DOM innerText Property is used to set or return the text content of a specified node and its descendants. This property is very similar to the text content property but returns the content of all elements, except for <script> and <style> elements. Syntax: It is used to set the innerT

HTML DOM nextSibling Property

The nextSibling property returns the next node at the same tree level, providing a node object. It's read-only and navigates through sibling nodes within the document structure. Syntax: node.nextSiblingReturn value: Name Description Node The nextSibling property returns the next sibling node or null

HTML DOM isContentEditable Property

The DOM isContentEditable property is used to return a boolean where true means the content of an element is editable and false represents content is not editable. This property is read-only. Syntax: Object.isContentEditable Return Value: This property returns a boolean value. true means that the co

HTML DOM implementation Property

The DOM implementation property in HTML is used to return the DOMImplementation object associated with the current document. The DOMImplementation is the interface that represents a method providing the object which is not dependent on any particular document. Syntax: document.implementation Return

HTML DOM specified Property

The DOM specified property is used to return the boolean value. It returns true if the element has a specified attribute, otherwise, it returns a false value if the element does not have a specific attribute. Syntax:attribute.specifiedReturn value: It returns the boolean value which represents wheth

HTML DOM offsetLeft Property

The DOM offsetLeft property is used to return the left position in pixels. This position is relative to the left side of the offsetParent element. Syntax: element.offsetLeft Return Value: It returns the number representing the left position of the element in pixels. Example: In this example, we will

HTML DOM previousElementSibling Property

The previousElementSibling property in HTML DOM is used to return the previous element of the same level as the given element. If no previous element is found on the same level then it returns null. It is a read-only property. It is similar to the previousSibling property but the difference is previ