Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Figure Object
The HTML DOM Figure object is used for reperesenting the HTML <figure>element. We can dynamically create and access a figure element using the figure object.
Syntax
Following is the syntax for creating a Figure object −
var p = document.createElement("FIGURE");
Example
Following is how you can create Figure object −
<!DOCTYPE html>
<html>
<head>
<script>
function createFigure(){
var fig = document.createElement("FIGURE");
fig.setAttribute("id", "Figure1");
document.body.appendChild(fig);
var i = document.createElement("IMG");
i.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servletsmini-logo.jpg");
i.setAttribute("width", "250");
i.setAttribute("height", "200");
i.setAttribute("alt", "Eiffel Tower");
fig.appendChild(i);
}
</script>
</head>
<body>
<h2>HTML DOM figure object</h2>
<button onclick="createFigure()">CREATE</button><br><br>
</body>
</html>
Output
This will produce the following output −
On clicking the CREATE button −
In the above example −
We have first created a button CREATE that will execute the createFigure() function when clicked by the user −
<button onclick="createFigure()">CREATE>/button><br><br>
The createFigure() function creates figure element using the createElement() method of the document object. Using the setAttribute(), we set the id of the figure element and finally appends it to document’s body using the appendChild() method. We then create another element img for putting the image inside the figure element.
Using the setAttribute() method we set the img element src, width, height and alt values. Finally the img element is appended as a child of figure element using the appendChild() method −
function createFigure(){
var fig = document.createElement("FIGURE");
fig.setAttribute("id", "Figure1");
document.body.appendChild(fig);
var i = document.createElement("IMG");
i.setAttribute("src", "EiffelTower.jpg");
i.setAttribute("width", "250");
i.setAttribute("height", "200");
i.setAttribute("alt", "Eiffel Tower");
fig.appendChild(i);
}
108 Views
