home

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

วัตถุ HTML DOM DD

วัตถุ HTML DOM DD เกี่ยวข้องกับองค์ประกอบ HTML <dd> ที่อยู่ภายในรายการนิยาม (Definition list) ที่แสดงด้วยองค์ประกอบ <dl> ในเอกสาร HTML

ไวยากรณ์

ไวยากรณ์สำหรับ -

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

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

ตัวอย่าง

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

<!DOCTYPE html> <html> <body> <h2>dd object example</h2> <p>คลิกปุ่มด้านล่างเพื่อสร้างองค์ประกอบ dd พร้อมข้อความในนั้น</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

เมื่อคลิกปุ่ม CREATE -

วัตถุ HTML DOM DD

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

เราสร้างรายการนิยามที่มี id "DL1" มีองค์ประกอบ <dt> ภายใน -

<dl id="DL1"> <dt>Mango</dt> </dl>

เราสร้างปุ่ม CREATE ที่จะเรียกใช้เมธอด create_dd() เมื่อผู้ใช้คลิก -

<button onclick="create_dd()">CREATE</button><br><br>

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

องค์ประกอบ <dd> พร้อมกับโหนดข้อความจึงถูกผนวกเป็นลูกของรายการนิยามโดยใช้เมธอด 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); }