InsertAdjacentHTML ทุกที่

หากต้องการแทรกเนื้อหาในเอกสาร HTML เรามี 3 วิธีดังนี้

บางคนอาจโต้แย้งว่าเราก็มี 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 นี้ได้