HTML DOM Aside Object
The DOM Aside Object is used to represent the HTML <Aside> element. The Aside element is accessed by getElementById().The aside Element is new in html 5.
Syntax:
document.getElementById("ID");where “id” is the ID assigned to the aside tag.
Example-1:
HTML
<!DOCTYPE html><html><head> <title>HTML DOM Aside Object</title> <style> .gfg { font-size: 30px; } aside { font-size: 40px; color: #090; font-weight: bold; } p { font-size: 20px; margin: 20px 0; } </style></head><body> //Assign ID to the aside tag. <aside id="GFG"> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> </aside> <h2 style="font-size:35px;">DOM Aside object</h2> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { var w = document.getElementById("GFG"); w.style.color = "red"; } </script></body></html> |
Output:
Before Clicking on Button:
After Clicking on Button:
Example-2: Aside Object can be created by using the document.createElement Method.
HTML
<!DOCTYPE html><html><head> <title>HTML DOM Aside Object</title> <style> .gfg { font-size: 30px; } p { font-size: 20px; margin: 20px 0; } </style></head><body> <center> <h2 style="font-size:35px;">DOM Aside object</h2> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { var w = document.createElement("ASIDE"); w.setAttribute("id", "GFG"); document.body.appendChild(w); var heading = document.createElement("H3"); var text1 = document.createTextNode("GeeksForGeeks"); heading.appendChild(text1); document.getElementById("GFG" ).appendChild(heading); var para = document.createElement("P"); var text2 = document.createTextNode( "A Computer Science Portal for Geeks."); para.appendChild(text2); document.getElementById("GFG" ).appendChild(para); } </script> </center></body></html> |
Output:
Before Clicking on Button:
After Clicking on Button:
Supported Browsers: The browser supported by DOM Aside Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...