home

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

วัตถุ HTML DOM DT

วัตถุ HTML DOM DT เชื่อมโยงกับองค์ประกอบ HTML

การใช้วัตถุ DT เราสามารถสร้างองค์ประกอบ
แบบไดนามิกโดยใช้ JavaScript

ไวยากรณ์

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

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

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

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h2>DT object example</h2>
<p>Create a DT element inside a DL by clicking the below button</p>
<button onclick="createDT()">CREATE</button>
<script>
   function createDT() {
      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 DT

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

วัตถุ HTML DOM DT

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

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

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

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

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

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

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

function createDT() {
   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);
}