วัตถุ HTML DOM DD

ออบเจ็กต์ HTML DOM DD เชื่อมโยงกับองค์ประกอบ HTML

ที่อยู่ในรายการคำจำกัดความที่แสดงโดยองค์ประกอบ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การสร้างวัตถุ DD -

var p = document.createElement("DD");

ตัวอย่าง

ให้เราดูตัวอย่างสำหรับวัตถุ HTML DOM DD -

<!DOCTYPE html>
<html>
<body>
<h2>dd object example</h2>
<p>Click the button below to create a dd element with some text in it</p>
<button onclick="create_dd()">CREATE</button><br><br>
<dl id="DL1">
<dt>Mango</dt>
</dl>
<script>
   function create_dd() {
      var d = document.createElement("DD");
      var txt = document.createTextNode("Mango is called the king of fruits.");
      d.appendChild(txt);
      var ele= document.getElementById("DL1");
      ele.appendChild(d);
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

วัตถุ HTML DOM DD

เมื่อคลิกปุ่มสร้าง -

วัตถุ HTML DOM DD

ในตัวอย่างข้างต้น −

เราได้สร้างรายการคำจำกัดความด้วย id “DL1” มันมี

องค์ประกอบอยู่ภายใน - <dl id="DL1"> <dt>Mango</dt> </dl> จากนั้นเราได้สร้างปุ่ม CREATE ที่จะรันเมธอด create_dd() เมื่อผู้ใช้คลิก - <button onclick="create_dd()">CREATE</button><br><br> เมธอด create_dd() สร้างองค์ประกอบ

โดยใช้เมธอด createElement() บนออบเจ็กต์เอกสารและกำหนดให้กับตัวแปร d จากนั้นจะสร้างโหนดข้อความโดยใช้เมธอด createTextNode() และกำหนดให้กับตัวแปร txt จากนั้นโหนดข้อความจะถูกผนวกเป็นลูกขององค์ประกอบ

โดยใช้เมธอด appendChild()

องค์ประกอบพร้อมกับโหนดข้อความจะถูกผนวกเป็นลูกของรายการคำจำกัดความอีกครั้งโดยใช้ appendChild() วิธีการ -

function create_dd() {
   var d = document.createElement("DD");
   var txt = document.createTextNode("Mango is called the king of fruits.");
   d.appendChild(txt);
   var ele= document.getElementById("DL1");
   ele.appendChild(d);
}