Teach with us

HTML DOM Caption Object

The HTML DOM Caption object is associated with the HTML <caption> element. The <caption> element is used for setting caption (title) of the table and should be the first child of the table. You can access caption element using the caption object.

Properties

Note: The below property are not supported in the HTML5.

Following is the HTML DOM Caption Object property −

PropertyDescription
AlignTo set or return the caption alignment.

Syntax

Following is the syntax for −

Creating a caption object −

var x = document.createElement("CAPTION");

Example

Let us see an example for the HTML DOM Caption object −

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 1px double black;
      margin-top: 14px;
   }
</style>
</head>
<body>
<p>Click the button below to create the caption for the table.</p>
<button onclick="createCaption()">CREATE</button>
<table id="SampleTable">
<tr>
<td colspan="2" rowpan="2">TABLE</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
<script>
   function createCaption() {
      var x = document.createElement("CAPTION");
      var t = document.createTextNode("TABLE CAPTION");
      x.appendChild(t);
      var table = document.getElementById("SampleTable")
      table.insertBefore(x, table.childNodes[0]);
   }
</script>
</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 to execute createCaption() method on click −

<button onclick="createCaption()">CREATE</button>

The createCaption() method creates a caption element using the createElement() method of the document object and assigned it to variable x. It then created a text node with “TABLE CAPTION” text. We then appended the text node to the element.

Finally, we get the <table> element using the id “SampleTable” and using the insertBefore() method inserted the caption along with the text node as the first child of the table. The <caption> can only be the first child of a table −

function createCaption() {
   var x = document.createElement("CAPTION");
   var t = document.createTextNode("TABLE CAPTION");
   x.appendChild(t);
   var table = document.getElementById("SampleTable")
   table.insertBefore(x, table.childNodes[0]);
}
Updated on 07-Aug-2019 12:23:10

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements