Метад insertAdjacentElement
Метад insertAdjacentElement дазваляе
ўставіць элемент у любое месца старонкі.
Частей за ўсё выкарыстоўваецца пасля стварэння элемента
з дапамогай createElement.
Код устаўляецца адносна апарнага
элемента. Можна зрабіць устаўку перад
апарным элементам (спосаб устаўкі beforeBegin),
пасля яго (спосаб устаўкі afterEnd),
а таксама ў пачатак (спосаб устаўкі afterBegin)
ці ў канец (спосаб устаўкі beforeEnd)
апарнага элемента.
Сінтаксіс
апарны элемент.insertAdjacentElement(спосаб устаўкі, код для устаўкі);
Прыклад . Спосаб beforeBegin
Хай апарны элемент - гэта элемент #target.
Уставім перад ім новы абзац:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
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.textContent = '!';
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.textContent = '!';
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.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Вынік выканання кода:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Глядзіце таксама
-
метад
insertAdjacentHTML,
які ўстаўляе тэгі ў зададзенае месца -
метад
insertAdjacentText,
які ўстаўляе тэкст ў зададзенае месца -
метад
prepend,
які ўстаўляе элементы ў пачатак -
метад
append,
які ўстаўляе элементы ў канец -
метад
appendChild,
які ўстаўляе элементы ў канец бацькі -
метад
insertBefore,
які ўстаўляе элементы перад элементам
