Rozwiązanie 2018 (Zła praktyka, przejdź do 2020 r.)
Wiem, że to pytanie jest starożytne, ale dla wszystkich przyszłych użytkowników, oto zmodyfikowany prototyp, jest to po prostu mikro-wypełnienie dla funkcji .insert Po tym, który nie istnieje, ten prototyp bezpośrednio dodaje nową funkcję baseElement.insertAfter(element);do prototypu Element:
Element.prototype.insertAfter = function(new) {
this.parentNode.insertBefore(new, this.nextSibling);
}
Po umieszczeniu wypełniacza w bibliotece, treści lub po prostu w kodzie (lub w innym miejscu, do którego można się odwołać) Po prostu napisz document.getElementById('foo').insertAfter(document.createElement('bar'));
Rozwiązanie 2019 (brzydkie, przejdź do 2020 r.)
Nowa edycja: NIE WOLNO STOSOWAĆ PROTOTYPÓW. Zastępują one domyślną bazę kodu i nie są bardzo wydajne ani bezpieczne i mogą powodować błędy zgodności, ale jeśli dotyczy to projektów niekomercyjnych, nie powinno to mieć znaczenia.
jeśli chcesz bezpieczną funkcję do użytku komercyjnego, po prostu użyj funkcji domyślnej. to nie jest ładne, ale działa:
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
Rozwiązanie 2020
Aktualne standardy sieciowe dla ChildNode: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode
Jest obecnie w Living Standards i jest BEZPIECZNY.
W przypadku nieobsługiwanych przeglądarek skorzystaj z funkcji Polyfill: https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js
Ktoś wspomniał, że Polyfill używa Protos, kiedy powiedziałem, że to zła praktyka. Są, szczególnie gdy są używane nieprawidłowo, podobnie jak moje rozwiązanie na 2018 rok. Jednak ta polifill znajduje się w Dokumentacji MDN i korzysta z bezpieczniejszej inicjalizacji i wykonania. Plus JEST dla starszych przeglądarek, w czasach, gdy nadpisywanie prototypów nie było takie złe.
Jak korzystać z rozwiązania 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