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...