Элемент: метод insertAdjacentElement()

Метод insertAdjacentElement() интерфейса Element вставляет указанный узел элемента в заданную позицию относительно элемента, на котором он вызван.

position

Строка, представляющая позицию относительно targetElement; должна точно (без учета регистра) соответствовать одной из следующих строк:

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

element

Элемент, который будет вставлен в дерево.

Вставленный элемент или null, если вставка не удалась.

SyntaxError DOMException

Выбрасывается, если указанное position не является распознаваемым значением.

TypeError

Выбрасывается, если указанный element не является допустимым элементом.

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

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

Посмотрите наш демонстрационный пример insertAdjacentElement.html на GitHub (также посмотрите исходный код). Здесь у нас последовательность элементов <div> внутри контейнера. Когда один из них нажимается, он становится выбранным, и вы можете нажать кнопки Вставить перед и Вставить после, чтобы вставить новые div-элементы перед или после выбранного элемента с помощью insertAdjacentElement().

• Element.insertAdjacentHTML()
• Element.insertAdjacentText()
• Node.insertBefore() (аналогично beforebegin, с другими аргументами)
• Node.appendChild() (тот же эффект, что и beforeend)