Element.insertAdjacentElement()

targetElement.insertAdjacentElement(position, element);

position

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

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

element

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

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

<!-- 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)