Đối tượng HTML DOM Figcaption được sử dụng để đại diện cho phần tử HTML5
Cú pháp
Sau đây là cú pháp cho -
Tạo đối tượng Figcaption -
var p = document.createElement("FIGCAPTION"); Ví dụ
Chúng ta hãy xem một ví dụ cho đối tượng Figcaption -
<!DOCTYPE html>
<html>
<head>
<script>
function createCaption() {
var caption = document.createElement("FIGCAPTION");
var txt = document.createTextNode("Learn Java Servlets");
caption.appendChild(txt);
var f=document.getElementById("Figure1");
f.appendChild(caption);
}
</script>
</head>
<body>
<h2>Caption</h2>
<p>Create a caption for the below image by clicking the below button</p>
<button onclick="createCaption()">CREATE</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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút TẠO -
Trong ví dụ trên -
Đầu tiên, chúng tôi đã tạo một phần tử figure với id “Figure1” và nó chứa một phần tử img bên trong nó -
<figure id="Figure1"> <img src="EiffelTower.jpg" alt="Eiffel Tower" width="250" height="200"> </figure>
Sau đó, chúng tôi tạo một nút CREATE () sẽ thực thi phương thức createCaption () khi người dùng nhấp vào -
<button onclick="createCaption()">CREATE</button>
Phương thức createCaption () tạo một phần tử hình mã hóa bằng cách sử dụng phương thức createElement () của đối tượng tài liệu. Một nút văn bản sử dụng phương thức createTextNode () của nội dung tài liệu được tạo và được nối vào phần tử hình mã hóa. Sau đó, chúng ta lấy phần tử figure bằng phương thức getElementById () và nối thêm hình ảnh cùng với nút văn bản làm phần tử con bằng phương thức appendChild () -
function createCaption() {
var caption = document.createElement("FIGCAPTION");
var txt = document.createTextNode("Eiffel Tower in Paris,France");
caption.appendChild(txt);
var f=document.getElementById("Figure1");
f.appendChild(caption);
}