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 >
< 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
Share your thoughts in the comments
Please Login to comment...