Решение 2018 года (плохая практика, переход к 2020 году)
Я знаю, что этот вопрос является древним, но для любых будущих пользователей, вот модифицированный прототип, это просто микро-заполнение для функции .insertAfter, которой не существует. Этот прототип напрямую добавляет новую функцию baseElement.insertAfter(element);в прототип Element:
Element.prototype.insertAfter = function(new) {
this.parentNode.insertBefore(new, this.nextSibling);
}
После того, как вы поместили полифил в библиотеку, гист, или просто в свой код (или в любое другое место, где на него можно ссылаться), просто напишите document.getElementById('foo').insertAfter(document.createElement('bar'));
Решение 2019 года (уродливо, перейти к 2020 году)
Новое редактирование: вы не должны использовать прототипы. Они перезаписывают кодовую базу по умолчанию и не очень эффективны или безопасны и могут вызвать ошибки совместимости, но если это некоммерческие проекты, это не имеет значения.
если вы хотите безопасную функцию для коммерческого использования, просто используйте функцию по умолчанию. это не красиво, но это работает:
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
Решение 2020
Текущие веб-стандарты для ChildNode: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode
В настоящее время в стандартах жизни и является безопасным.
Для неподдерживаемых браузеров используйте этот Polyfill: https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js
Кто-то упомянул, что Polyfill использует Protos, когда я сказал, что это плохая практика. Они, особенно когда они используются неправильно, как мое решение для 2018. Тем не менее, этот polyfill находится в Документации MDN и использует своего рода инициализацию и выполнение, которые более безопасны. Кроме того, это для поддержки старых браузеров, в те времена, когда Prototype Overwriting была не так уж и плоха.
Как использовать решение 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