chènAdjacentHTML ở mọi nơi

Paul Kinlan

Twitter GitHub Sự cố Cộtodon Trang chủ

Nếu muốn chèn nội dung vào tài liệu HTML, chúng ta có ba cách để thực hiện:

• Sử dụng các phương thức DOM như createNode và appendChild
• Sử dụng Mảnh tài liệu
• Sử dụng innerHTML

Có thể nói rằng chúng ta cũng có document.write cho một số ít trường hợp sử dụng.

innerHTML đã được chuẩn hoá bằng HTML5 và cùng với đó là một phương thức anh em insertAdjacentHTML, hoạt động như innerHTML nhưng cho phép chúng ta xác định cụ thể hơn nơi chúng ta muốn chèn nội dung HTML: beforestart, afterafter, beforeEnd và afterEnd.

var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");

Trở lại năm 2008, John Resig đã viết một bài viết về insertAdjacentHTML với kết luận sau:

Lưu ý: Việc để trình duyệt triển khai phương thức này sẽ làm giảm đáng kể số lượng mã cần thiết để viết một thư viện JavaScript đáng tin cậy. Tôi rất mong phương thức này sẽ được sử dụng rộng rãi hơn (cùng với querySelectorAll) để chúng ta có thể thực sự đơn giản hoá quy trình lập trình.

Cho đến nay, vấn đề chính với insertAdjacentHTML là thiếu hỗ trợ trình duyệt. Với Firefox triển khai insertAdjacentHTML kể từ phiên bản 8, nó sẽ có sẵn trong tất cả các trình duyệt chính bao gồm cả trình duyệt cho thiết bị di động. Nếu muốn sử dụng ngay bây giờ và đảm bảo rằng tính năng này hoạt động trong các phiên bản Firefox cũ hơn phiên bản 8, bạn có thể dùng polyfill này.