Javascript Reference - HTML DOM Caption Object

The Caption object represents an HTML <caption> element.

Caption Object Properties

Property	Description
align	>Sets or returns the alignment of the caption

The align property is not supported in HTML5.

Use style.textAlign or style.captionSide instead.

Standard Properties and Events

The Caption object also supports the standard properties and events.

Example

The following code show to get a Caption object by using getElementById().


<!DOCTYPE html>
<html>
<body>
<table>
  <caption id="myCaption">table caption</caption>
  <tr>
    <td>A</td>
    <td>0</td>
  </tr><!--from   w w  w  .ja  v a  2  s  .  c  om-->
</table>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    var x = document.getElementById("myCaption");
    x.style.color = "red";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code show to create a <caption> element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<table id="myTable">
  <tr>
    <td>A</td>
    <td>0</td>
  </tr><!-- w ww.j  ava 2 s.co m-->
</table>

<script>
function myFunction() {
    var x = document.createElement("CAPTION");
    var t = document.createTextNode("my table caption");
    x.appendChild(t);

    var table = document.getElementById("myTable")
    table.insertBefore(x, table.childNodes[0]);
}
</script>

</body>
</html>

The code above is rendered as follows:

We can also create a <caption> element by using the createCaption method of the Table object.