Метад 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>

Глядзіце таксама