InsertAdjacentHTML ทุกที่
bookmark_borderbookmark
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
หากต้องการแทรกเนื้อหาในเอกสาร 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 นี้ได้
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2011-08-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2011-08-27 UTC"],[],[]]