HTML DOM Figure Object
The DOM Figure Object is used to represent the HTML <figure> element. The figure element is accessed by getElementById().
Syntax:
document.getElementById("ID");
Where “id” is the ID assigned to the “figure” tag.
Example 1: In this example, we will use DOM Figure Object.
HTML
<!DOCTYPE html> < html > < head > < title >DOM Figure Object </ title > < style > body { text-align: center; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >DOM figure Object</ h2 > <!-- assign id to figure tag --> < figure id = "GFG" > < img src = "https://media.w3wiki.net/wp-content/uploads/Beginner-25.png" alt = "w3wiki" width = "304" height = "228" > < figcaption >Beginner logo</ figcaption > </ figure > < button onclick = "Beginner()" > Submit </ button > < p id = "sudo" ></ p > < script > function Beginner() { <!-- accessing the figure object --> let g = document.getElementById("GFG").id; document.getElementById("sudo").innerHTML = g; } </ script > </ body > </ html > |
Output:
Example 2: Figure Object can be created by using the document.createElement Method.
HTML
<!DOCTYPE html> < html > < head > < title > DOM figure object </ title > < style > body { text-align: center; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >DOM figure Object</ h2 > < button onclick = "Beginner()" > Submit </ button > < script > function Beginner() { let g = document.createElement("FIGURE"); g.setAttribute("id", "GFG"); document.body.appendChild(g); let f = document.createElement("IMG"); f.setAttribute("src", "https://media.w3wiki.net/wp-content/uploads/Beginner-25.png"); f.setAttribute("width", "304"); f.setAttribute("width", "228"); f.setAttribute("alt", "w3wiki"); document.getElementById("GFG").appendChild(f); } </ script > </ body > </ html > |
Output:
Supported Browsers: The browser supported by DOM figure Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Contact Us