Horje
HTML DOM HGroup Object

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>

Output:

Supported Browsers:  

  • Google Chrome 5 and above
  • Internet Explorer 9 and above
  • Firefox 4 and above
  • Opera 11.1 and above
  • Safari 5 and above
  • Edge 12 and above

 


Reffered: https://www.geeksforgeeks.org

HTML

Related
How to use placeholder attribute in HTML ? How to use placeholder attribute in HTML ?
HTML DOM Keygen keytype Property HTML DOM Keygen keytype Property
HTML DOM Image align Property HTML DOM Image align Property
HTML DOM Object vspace Property HTML DOM Object vspace Property
HTML DOM Keygen form Property HTML DOM Keygen form Property

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje