вопросы пишите мне в телеграмм +375298176892
можно скачать офлайн версию сайта: code.mu old.code.mu

Метод insertAdjacentElement

Метод insertAdjacentElement позволяет вставить элемент в любое место страницы. Чаще всего используется после создания элемента с помощью createElement.

Код вставляется относительно опорного элемента. Можно сделать вставку перед опорным элементом (способ вставки beforeBegin), после него (способ вставки afterEnd), а также в начало (способ вставки afterBegin) или в конец (способ вставки beforeEnd) опорного элемента.

Синтаксис

опорный элемент.insertAdjacentElement(способ вставки, код для вставки)

Пример . Способ beforeBegin

Пусть опорный элемент - это элемент #target. Вставим перед ним новый абзац:

<div id="target"> <p>elem</p> </div> let p = document.createElement('p'); p.innerHTML = '!'; let target = document.querySelector('#target'); target.insertAdjacentElement('beforeBegin', p);

Результат выполнения кода:

<p>!</p> <div id="target"> <p>elem</p> </div>

Пример . Способ afterEnd

А теперь вставим новый абзац после опорного элемента:

<div id="target"> <p>elem</p> </div> let p = document.createElement('p'); p.innerHTML = '!'; let target = document.querySelector('#target'); target.insertAdjacentElement('afterEnd', p);

Результат выполнения кода:

<div id="target"> <p>elem</p> </div> <p>!</p>

Пример . Способ afterBegin

Вставим новый абзац в начало опорного элемента:

<div id="target"> <p>elem</p> </div> let p = document.createElement('p'); p.innerHTML = '!'; let target = document.querySelector('#target'); target.insertAdjacentElement('afterBegin', p);

Результат выполнения кода:

<div id="target"> <p>!</p> <p>elem</p> </div>

Пример . Способ beforeEnd

Вставим новый абзац в конец опорного элемента:

<div id="target"> <p>elem</p> </div> let p = document.createElement('p'); p.innerHTML = '!'; let target = document.querySelector('#target'); target.insertAdjacentElement('beforeEnd', p);

Результат выполнения кода:

<div id="target"> <p>elem</p> <p>!</p> </div>

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

  • метод insertAdjacentHTML,
    который вставляет теги в заданное место
  • метод insertAdjacentText,
    который вставляет текст в заданное место
  • метод prepend,
    который вставляет элементы в начало
  • метод append,
    который вставляет элементы в конец
  • метод appendChild,
    который вставляет элементы в конец родителя
  • метод insertBefore,
    который вставляет элементы перед элементом