Giải pháp 2018 (Thực hành xấu, đến năm 2020)
Tôi biết câu hỏi này là Ancient, nhưng đối với bất kỳ người dùng nào trong tương lai, đây là một nguyên mẫu được sửa đổi, đây chỉ là một polyfill siêu nhỏ cho hàm .insertAfter không tồn tại nguyên mẫu này trực tiếp thêm một chức năng mới baseElement.insertAfter(element);vào nguyên mẫu Element:
Element.prototype.insertAfter = function(new) {
this.parentNode.insertBefore(new, this.nextSibling);
}
Khi bạn đã đặt polyfill trong thư viện, ý chính hoặc chỉ trong mã của bạn (hoặc bất kỳ nơi nào khác có thể được tham chiếu) Chỉ cần viết document.getElementById('foo').insertAfter(document.createElement('bar'));
Giải pháp 2019 (Xấu xí, đến năm 2020)
Chỉnh sửa mới: Bạn KHÔNG NÊN SỬ DỤNG BẢO VỆ. Họ ghi đè lên cơ sở mã mặc định và không hiệu quả hoặc an toàn và có thể gây ra lỗi tương thích, nhưng nếu nó dành cho các dự án phi thương mại thì không thành vấn đề.
nếu bạn muốn một chức năng an toàn cho sử dụng thương mại, chỉ cần sử dụng một chức năng mặc định. Nó không đẹp nhưng nó hoạt động:
function insertAfter(el, newEl) {
el.parentNode.insertBefore(newEl, this.nextSibling);
}
// use
const el = document.body || document.querySelector("body");
// the || means "this OR that"
el.insertBefore(document.createElement("div"), el.nextSibling);
// Insert Before
insertAfter(el, document.createElement("div"));
// Insert After
Giải pháp 2020
Các tiêu chuẩn web hiện tại cho ChildNode: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode
Nó hiện đang ở trong Mức sống và AN TOÀN.
Đối với các trình duyệt không được hỗ trợ, hãy sử dụng Polyfill này: https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js
Có người đề cập rằng Polyfill sử dụng Protos, khi tôi nói rằng họ thực hành không tốt. Chúng, đặc biệt là khi chúng được sử dụng không chính xác, như giải pháp của tôi cho năm 2018. Tuy nhiên, polyfill đó có trên Tài liệu MDN và sử dụng một loại khởi tạo và thực thi an toàn hơn. Thêm vào đó, nó hỗ trợ trình duyệt cũ hơn, trong thời đại mà việc ghi đè nguyên mẫu không quá tệ.
Cách sử dụng Giải pháp 2020:
const el = document.querySelector(".class");
// Create New Element
const newEl = document.createElement("div");
newEl.id = "foo";
// Insert New Element BEFORE
el.before(newEl);
// Insert New Element AFTER
el.after(newEl);
// Remove Element
el.remove();
// Remove Child
newEl.remove(); // This one wasnt tested but should work