Element.insertAdjacentElement()

Метод insertAdjacentElement() добавляет переданный элемент в DOM-дерево относительно элемента, вызвавшего метод.

Синтаксис

targetElement.insertAdjacentElement(position, element);

Параметры

position

String - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):

• 'beforebegin': перед самим элементом targetElement.
• 'afterbegin': внутри элемента targetElement, перед его первым потомком.
• 'beforeend': внутри элемента targetElement, после его последнего потомка.
• 'afterend': после самого элемента targetElement.

element

Элемент, добавляемый в DOM-дерево.

Возвращаемое значение

Метод возвращает добавляемый элемент, либо null, если добавление элемента завершилось ошибкой.

Исключения

Наглядное отображение параметра position

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

Примеры

beforeBtn.addEventListener("click", function () {
 var tempDiv = document.createElement("div");
 tempDiv.style.backgroundColor = randomColor();
 if (activeElem) {
 activeElem.insertAdjacentElement("beforebegin", tempDiv);
 }
 setListener(tempDiv);
});
afterBtn.addEventListener("click", function () {
 var tempDiv = document.createElement("div");
 tempDiv.style.backgroundColor = randomColor();
 if (activeElem) {
 activeElem.insertAdjacentElement("afterend", tempDiv);
 }
 setListener(tempDiv);
});

Посмотрите наше демо insertAdjacentElement.html на Github (так же посмотрите исходный код). В этом демо мы имеем последовательность <div> элементов внутри контейнера. При выборе одного из них можно нажать кнопку Insert before или Insert after и добавить новые div до или после выбранного элемента используя метод insertAdjacentElement().

Спецификации

Совместимость с браузерами

Смотрите также

• Element.insertAdjacentHTML()
• Element.insertAdjacentText()
• Node.insertBefore()
• Node.appendChild() (такой же эффект со значением position beforeend)