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:
html
<!DOCTYPE html><html><head> <title>DOM Figure Object </title> <style> body { text-align: center; } h1 { color: green; } </style></head><body> <h1>GeeksforGeeks</h1> <h2>DOM figure Object</h2> <!-- assign id to figure tag --> <figure id="GFG"> <img src= alt="GeeksforGeeks" width="304" height="228"> <figcaption>Geeks logo</figcaption> </figure> <button onclick="Geeks()">Submit</button> <p id="sudo"></p> <script> function Geeks() { <!-- accessing the figure object --> var g = document.getElementById("GFG").id; document.getElementById("sudo").innerHTML = g; } </script></body></html> |
Output: Before Clicking On Button: 
After Clicking On Button: 
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>GeeksforGeeks</h1> <h2>DOM figure Object</h2> <button onclick="Geeks()">Submit</button> <script> function Geeks() { var g = document.createElement("FIGURE"); g.setAttribute("id", "GFG"); document.body.appendChild(g); var f = document.createElement("IMG"); f.setAttribute("src", f.setAttribute("width", "304"); f.setAttribute("width", "228"); f.setAttribute("alt", "GeeksforGeeks"); document.getElementById("GFG").appendChild(f); } </script></body></html> |
Output: Before Clicking On Button: 
After Clicking On Button: 
Supported Browsers: The browser supported by DOM figure Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
![https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"](https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"){kind=link}
Please Login to comment...