HTML DOM Figure object

HTMLWeb DevelopmentFront End Technology

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);
}
raja
Published on 19-Aug-2019 07:40:08
Advertisements