home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วัตถุ HTML DOM dl

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

องค์ประกอบสำหรับสร้างรายการคำอธิบาย การใช้วัตถุ dl เราสามารถสร้างและเข้าถึงองค์ประกอบ
แบบไดนามิกโดยใช้ JavaScript

ไวยากรณ์

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

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

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

ตัวอย่าง

เรามาดูตัวอย่างของวัตถุ dl กัน −

<!DOCTYPE html>
<html>
<body>
<h2>Div object example</h2>
<p>Create a div by clicking the below button</p>
<button onclick="createDiv()">CREATE</button>
<script>
   function createDiv() {
      var Desc = document.createElement("DL");
      var DesT = document.createElement("DT");
      var tn= document.createTextNode("Mango");
      DesT.appendChild(tn);
      var data = document.createElement("DD");
      var tn1 = document.createTextNode("Mango is the king of fruits");
      data.appendChild(tn1);
      document.body.appendChild(Desc);
      Desc.appendChild(DesT);
      Desc.appendChild(data);
   }
</script>
</body>
</html>

ผลลัพธ์

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

วัตถุ HTML DOM dl

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

วัตถุ HTML DOM dl

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

ขั้นแรกเราได้สร้างปุ่ม CREATE ซึ่งจะรันเมธอด createDiv() เมื่อผู้ใช้คลิก -

<button onclick="createDiv()">CREATE</button>

เมธอด createDiv() จะสร้างองค์ประกอบ

,
และ
โดยใช้เมธอด createElement() ของออบเจ็กต์เอกสาร และกำหนดองค์ประกอบให้กับตัวแปร Desc, DesT และ data ตามลำดับ จากนั้นเราจะสร้างโหนดข้อความสำหรับองค์ประกอบ
และ
โดยใช้เมธอด createTextNode() และผนวกเข้ากับองค์ประกอบที่เกี่ยวข้องโดยใช้เมธอด appendChild()

สุดท้าย เราผนวก

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

function createDiv() {
   var Desc = document.createElement("DL");
   var DesT = document.createElement("DT");
   var tn= document.createTextNode("Mango");
   DesT.appendChild(tn);
   var data = document.createElement("DD");
   var tn1 = document.createTextNode("Mango is the king of fruits");
   data.appendChild(tn1);
   document.body.appendChild(Desc);
   Desc.appendChild(DesT);
   Desc.appendChild(data);
}