Đối tượng HTML DOM Figcaption

Đối tượng Figcaption trong HTML DOM đại diện cho phần tử <figcaption> (HTML5), dùng để cung cấp chú thích (caption) cho nội dung bên trong <figure>. Có thể tạo và truy xuất bằng createElement() và getElementById().

Cú pháp

Tạo đối tượng Figcaption:

var figcaptionElement = document.createElement("FIGCAPTION");

Ví dụ

Ví dụ thêm chú thích cho figure đã có sẵn:

<!DOCTYPE html>
<html>
<head>
<script>
  function createCaption() {
    var caption = document.createElement("FIGCAPTION");
    var txt = document.createTextNode("Học Java Servlets");
    caption.appendChild(txt);
    var figure = document.getElementById("Figure1");
    figure.appendChild(caption);
  }
</script>
</head>
<body>
<h2>Đối tượng Figcaption</h2>
<p>Nhấn nút để tạo chú thích cho hình ảnh bên dưới</p>
<button onclick="createCaption()">TẠO CHÚ THÍCH</button>
<figure id="Figure1">
  <img src="https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg" alt="Servlets" width="250" height="200">
</figure>
</body>
</html>

Kết quả

Ban đầu figure chỉ chứa hình ảnh.

Sau khi nhấn "TẠO CHÚ THÍCH", dòng chữ "Học Java Servlets" xuất hiện dưới hình ảnh (bên trong figure).

Giải thích

• Figure id="Figure1" chứa sẵn một <img>.
• Nút "TẠO CHÚ THÍCH" gọi hàm createCaption().
• Hàm tạo <figcaption>, nút văn bản "Học Java Servlets", gắn văn bản vào figcaption.
• Lấy figure qua ID, gắn figcaption vào figure (xuất hiện sau img).