ออบเจ็กต์ HTML DOM Figcaption ใช้สำหรับแสดงองค์ประกอบ HTML5
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การสร้างวัตถุ Figcaption -
var p = document.createElement("FIGCAPTION"); ตัวอย่าง
เรามาดูตัวอย่างของวัตถุ 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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มสร้าง -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างองค์ประกอบรูปที่มีรหัส “Figure1” และมีองค์ประกอบ img อยู่ภายใน -
<figure id="Figure1"> <img src="EiffelTower.jpg" alt="Eiffel Tower" width="250" height="200"> </figure>
จากนั้นเราจะสร้างปุ่ม CREATE() ที่จะรันเมธอด createCaption() เมื่อผู้ใช้คลิก -
<button onclick="createCaption()">CREATE</button>
เมธอด createCaption() สร้างองค์ประกอบ figcaption โดยใช้เมธอด createElement() ของอ็อบเจ็กต์เอกสาร โหนดข้อความโดยใช้เมธอด createTextNode() ของเนื้อหาเอกสารจะถูกสร้างขึ้นและผนวกเข้ากับองค์ประกอบ figcaption จากนั้นเราได้องค์ประกอบรูปโดยใช้เมธอด getElementById() และผนวก figcaption พร้อมกับโหนดข้อความเป็นองค์ประกอบลูกโดยใช้เมธอด 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);
} 