หากต้องการแทรกเนื้อหาในเอกสาร HTML เรามี 3 วิธีดังนี้
- การใช้เมธอด DOM เช่น
createNode
และappendChild
- การใช้เศษส่วนของเอกสาร
- กำลังใช้
innerHTML
บางคนอาจโต้แย้งว่าเราก็มี document.write
สำหรับบางกรณีการใช้งานด้วย
innerHTML
ได้รับมาตรฐานใน HTML5 และมีเมธอดพี่น้องอย่าง insertAdjacentHTML ซึ่งทํางานเหมือนกับ innerHTML
แต่ช่วยให้เรากําหนดตําแหน่งที่ต้องการแทรกเนื้อหา HTML ได้เฉพาะเจาะจงมากขึ้น เช่น beforeBegin, afterBegin, 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 เวอร์ชันที่เก่ากว่า 8 คุณสามารถใช้ polyfill นี้ได้