ออบเจ็กต์ DT ใน HTML DOM

ออบเจ็กต์ DT ใน HTML DOM เกี่ยวข้องกับองค์ประกอบ HTML <dt> (Definition Term) ใช้สำหรับสร้างองค์ประกอบ <dt> แบบไดนามิกด้วย JavaScript

ไวยากรณ์ (Syntax)

การสร้างออบเจ็กต์ DT:

var dtElement = document.createElement("DT");

ตัวอย่าง

ตัวอย่างการสร้างองค์ประกอบ DT ภายในรายการคำอธิบาย (DL) โดยใช้ JavaScript:

<!DOCTYPE html>
<html>
<body>
<h2>ตัวอย่างออบเจ็กต์ DT</h2>
<p>คลิกปุ่มด้านล่างเพื่อสร้างองค์ประกอบ DT ภายใน DL</p>
<button onclick="createDT()">CREATE</button>
<script>
  function createDT() {
    var dl = document.createElement("DL");
    var dt = document.createElement("DT");
    var dtText = document.createTextNode("Mango");
    dt.appendChild(dtText);
    
    var dd = document.createElement("DD");
    var ddText = document.createTextNode("Mango is the king of fruits");
    dd.appendChild(ddText);
    
    document.body.appendChild(dl);
    dl.appendChild(dt);
    dl.appendChild(dd);
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงปุ่ม "CREATE" เท่านั้น

เมื่อคลิกปุ่ม "CREATE" จะสร้างรายการคำอธิบาย (DL) ที่มีคำศัพท์ (DT) คือ "Mango" และคำอธิบาย (DD) คือ "Mango is the king of fruits"

คำอธิบายโค้ด

• สร้างปุ่ม "CREATE" ที่เรียกใช้ฟังก์ชัน createDT() เมื่อคลิก
• ฟังก์ชัน createDT() สร้างองค์ประกอบ <dl>, <dt>, และ <dd> ด้วย createElement()
• สร้างโหนดข้อความ (text node) สำหรับ <dt> และ <dd> ด้วย createTextNode() แล้วผูกกับองค์ประกอบแต่ละตัวด้วย appendChild()
• ผูก <dt> และ <dd> เข้าไปใน <dl> แล้วนำ <dl> ไปต่อท้าย <body>