ถ้าต้องการแทรกเนื้อหาในเอกสาร HTML เรามี 3 วิธีดังนี้
- การใช้เมธอด DOM เช่น
createNodeและappendChild - การใช้ส่วนย่อยของเอกสาร
- ใช้ไป
innerHTML
ผู้ใช้คนหนึ่งสามารถพูดได้ว่าเรามี document.write สำหรับกรณีการใช้งานไม่กี่อย่าง
innerHTML ได้รับการปรับให้เป็นมาตรฐานใน HTML5 โดยใช้วิธีนี้เป็น insertAdjacentHTML ซึ่งเป็นวิธีการเดียวกันซึ่งทำงานเป็น innerHTML แต่ช่วยให้เรากำหนดตำแหน่งที่ต้องการแทรกเนื้อหา HTML ได้อย่างเฉพาะเจาะจงมากขึ้น ซึ่งได้แก่ beforebegin, afterStart, beforeEnd และ afterEnd
var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");
ย้อนกลับไปในปี 2008 John Resig เขียนบทความเกี่ยวกับ insertAdjacentHTML โดยมีบทสรุปนี้
ก่อนหน้านี้ ปัญหาหลักของ insertAdjacentHTML คือการขาดการรองรับเบราว์เซอร์ เมื่อ Firefox ใช้งาน insertAdjacentHTML เวอร์ชัน 8 เป็นต้นไป Firefox ก็จะพร้อมใช้งานในเบราว์เซอร์หลักๆ ทั้งหมด รวมถึงเบราว์เซอร์ในอุปกรณ์เคลื่อนที่ หากต้องการใช้ตอนนี้และตรวจสอบว่าใช้งานได้กับ Firefox เวอร์ชันเก่ากว่า 8 คุณก็ใช้ polyfill นี้ได้