Repository navigation
Expand file tree
/
Copy pathindex.md
More file actions
77 lines (54 loc) · 1.72 KB
/
Copy pathindex.md
File metadata and controls
77 lines (54 loc) · 1.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
---
title: "HTMLTableElement: createCaption() method"
short-title: createCaption()
slug: Web/API/HTMLTableElement/createCaption
page-type: web-api-instance-method
browser-compat: api.HTMLTableElement.createCaption
---
{{APIRef("HTML DOM")}}
The **`createCaption()`** method of the {{domxref("HTMLTableElement")}} interface creates a {{HTMLElement("caption")}} element, inserts it as the first child of the given {{HTMLElement("table")}}, and returns it. If the table already has a `<caption>` element child, this method returns the first such child without creating one.
When creation is needed, this method creates and inserts the element directly, without requiring separate calls to methods such as {{domxref("Document.createElement()")}} and {{domxref("Node.insertBefore()")}}.
## Syntax
```js-nolint
createCaption()
```
### Parameters
None.
### Return value
An {{domxref("HTMLTableCaptionElement")}}.
## Examples
This example uses JavaScript to add a caption to a table that initially lacks one.
### HTML
```html
<table>
<tbody>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
</tbody>
</table>
```
### JavaScript
```js
const table = document.querySelector("table");
const caption = table.createCaption();
caption.textContent = "This caption was created by JavaScript!";
```
### Result
{{EmbedLiveSample("Examples")}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{domxref("HTMLTableElement.createTBody()")}}
- {{domxref("HTMLTableElement.createTFoot()")}}
- {{domxref("HTMLTableElement.createTHead()")}}
- {{domxref("HTMLTableElement.deleteCaption()")}}