Метод insertAdjacentElement

Методът insertAdjacentElement позволява да се вмъкне елемент на всяко място в страницата. Най-често се използва след създаване на елемент с createElement. Кодът се вмъква спрямо опорен елемент. Може да се направи вмъкване преди опорния елемент (начин на вмъкване beforeBegin), след него (начин на вмъкване afterEnd), както и в началото (начин на вмъкване afterBegin) или в края (начин на вмъкване beforeEnd) на опорния елемент.

Синтаксис

javascriptопорен елемент.insertAdjacentElement(начин на вмъкване, код за вмъкване);

Пример . Начин beforeBegin

Нека опорният елемент е елемент #target. Нека вмъкнем нов параграф преди него:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

Резултат от изпълнението на кода:

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

Пример . Начин afterEnd

А сега нека вмъкнем нов параграф след опорния елемент:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

Резултат от изпълнението на кода:

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

Пример . Начин afterBegin

Нека вмъкнем нов параграф в началото на опорния елемент:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

Резултат от изпълнението на кода:

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

Пример . Начин beforeEnd

Нека вмъкнем нов параграф в края на опорния елемент:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

Резултат от изпълнението на кода:

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

Вижте също