Методы вставки элементов после другого элемента с использованием JavaScript DOM

Чтобы вставить элемент после другого элемента в JavaScript с использованием DOM (объектной модели документа), вы можете использовать различные методы. Вот некоторые распространенные подходы:

  1. Использование метода InsertAdjacentElement():

    const newElement = document.createElement('div');
    const referenceElement = document.getElementById('referenceElement');
    referenceElement.insertAdjacentElement('afterend', newElement);
  2. Использование метода InsertAdjacentHTML():

    const referenceElement = document.getElementById('referenceElement');
    referenceElement.insertAdjacentHTML('afterend', '<div>New Element</div>');
  3. Использование метода InsertAdjacentText():

    const referenceElement = document.getElementById('referenceElement');
    referenceElement.insertAdjacentText('afterend', 'New Text');
  4. Использование метода nextSibling и метода InsertBefore():

    const newElement = document.createElement('div');
    const referenceElement = document.getElementById('referenceElement');
    referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
  5. Использование метода ParentNode и InsertBefore():

    const newElement = document.createElement('div');
    const referenceElement = document.getElementById('referenceElement');
    referenceElement.parentNode.insertBefore(newElement, referenceElement.nextElementSibling);

Обратите внимание, что во всех приведенных выше примерах «referenceElement» представляет элемент, после которого вы хотите вставить новый элемент.