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

ออบเจ็กต์ dl ใน HTML DOM เกี่ยวข้องกับองค์ประกอบ HTML <dl> (Description List) ใช้สำหรับสร้างและเข้าถึงรายการคำอธิบายแบบไดนามิกด้วย JavaScript

ไวยากรณ์ (Syntax)

การสร้างรายการคำอธิบาย:

var dlElement = document.createElement("DL");

ตัวอย่าง

ตัวอย่างการสร้างรายการคำอธิบาย (DL) พร้อม DT และ DD ด้วย JavaScript:

<!DOCTYPE html>
<html>
<body>
<h2>ตัวอย่างออบเจ็กต์ dl</h2>
<p>คลิกปุ่มด้านล่างเพื่อสร้างรายการคำอธิบาย</p>
<button onclick="createDiv()">CREATE</button>
<script>
  function createDiv() {
    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"

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

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

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