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 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 −
| Property | Description |
|---|---|
| Align | To 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]); }
169 Views
