HTML DOM HGroup Object

Last Updated : 26 Oct, 2021

The DOM HGroup Object is used to represent the HTML <hgroup> element. It can be accessed by using any selector in JavaScript like getElementById().

Syntax:

document.getElementById("hgroupid");

The below examples demonstrate the use of the hgroup Object.

Example 1: In this example, the background color of the HGroup element is changed to green.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2 style="font-size:35px;">
            DOM HGroup Object
        </h2>
 
        <!-- Using the HTML hgroup tag -->
        <hgroup id="GFG">
            <h1>Hello GeeksForGeeks</h1>
            <h3>Hello GeeksForGeeks.</h3>
            <h4>Hello GeeksForGeeks.</h4>
        </hgroup>
        <button onclick="myGeeks()">
            Submit
        </button>
    </center>
 
    <p id="geeks"></p>
 
 
     
    <script>
        function myGeeks() {
            var b = document.getElementById("GFG");
            b.style.backgroundColor = "green";
        }
    </script>
</body>
 
</html>

Output:

Example 2: In this example, the HGroup object can be created using the document.createElement() method.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script>
        function myGeeks() {
            var x = document.createElement("HGROUP");
            document.body.appendChild(x);
 
            var Hg1 = document.createElement("H3");
            var txt = document.createTextNode(
                "GeeksForGeeks"
            );
            elemh1.appendChild(txt);
            x.appendChild(Hg1);
 
            var Hg2 = document.createElement("H4");
            var txt2 = document.createTextNode(
                "A computer science portal for Geek."
            );
            elemh2.appendChild(txt2);
            x.appendChild(Hg2);
        }
    </script>
</head>
 
<body>
    <H1>GeeksForGeeks</H1>
    <h2>DOM HGroup Object</h2>
    <button onclick="myGeeks()">
        Submit
    </button>
    <p id="sudo"></p>
 
 
</body>
 
</html>