ในการเพิ่มองค์ประกอบใหม่ให้กับ HTML DOM เราต้องสร้างมันขึ้นมาก่อนแล้วจึงจำเป็นต้องผนวกเข้ากับองค์ประกอบที่มีอยู่
ขั้นตอนในการติดตาม
1) ขั้นแรก ให้สร้าง ส่วน div และเพิ่มข้อความโดยใช้
แท็ก
2) สร้างองค์ประกอบ
3) สร้างข้อความโดยใช้ document.createTextNode() เพื่อแทรกลงในองค์ประกอบที่สร้างขึ้นด้านบน ("p")
4) การใช้ appendChild() พยายามผนวกองค์ประกอบที่สร้างขึ้นพร้อมกับข้อความเข้ากับ div . ที่มีอยู่ แท็ก.
ดังนั้น องค์ประกอบใหม่จะถูกสร้างขึ้น (
) และผนวกเข้ากับองค์ประกอบที่มีอยู่ (
)
ตัวอย่าง
ในตัวอย่างต่อไปนี้ เริ่มต้น div ส่วนนี้ประกอบด้วยเพียง 2 ข้อความ แต่ต่อมามีการสร้างข้อความเพิ่มอีกหนึ่งข้อความในส่วน div ตามที่แสดงในผลลัพธ์
<html>
<body>
<div id="new">
<p id="p1">Tutorix</p>
<p id="p2">Tutorialspoint</p>
</div>
<script>
var tag = document.createElement("p");
var text = document.createTextNode("Tutorix is the best e-learning platform");
tag.appendChild(text);
var element = document.getElementById("new");
element.appendChild(tag);
</script>
</body>
</html> ผลลัพธ์
Tutorix Tutorialspoint Tutorix is the best e-learning platform
