Metoda insertAdjacentElement
Metoda insertAdjacentElement umożliwia
wstawienie elementu w dowolne miejsce strony.
Najczęściej używana jest po utworzeniu elementu
za pomocą createElement.
Kod jest wstawiany względem elementu
odniesienia. Można dokonać wstawienia przed
elementem odniesienia (sposób wstawienia beforeBegin),
po nim (sposób wstawienia afterEnd),
a także na początek (sposób wstawienia afterBegin)
lub na koniec (sposób wstawienia beforeEnd)
elementu odniesienia.
Składnia
element odniesienia.insertAdjacentElement(sposób wstawienia, kod do wstawienia);
Przykład . Sposób beforeBegin
Niech elementem odniesienia będzie element #target.
Wstawmy przed nim nowy akapit:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Wynik wykonania kodu:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Przykład . Sposób afterEnd
A teraz wstawmy nowy akapit po elemencie odniesienia:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Wynik wykonania kodu:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Przykład . Sposób afterBegin
Wstawmy nowy akapit na początek elementu odniesienia:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Wynik wykonania kodu:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Przykład . Sposób beforeEnd
Wstawmy nowy akapit na koniec elementu odniesienia:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Wynik wykonania kodu:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Zobacz też
-
metoda
insertAdjacentHTML,
która wstawia znaczniki w określone miejsce -
metoda
insertAdjacentText,
która wstawia tekst w określone miejsce -
metoda
prepend,
która wstawia elementy na początek -
metoda
append,
która wstawia elementy na koniec -
metoda
appendChild,
która wstawia elementy na koniec rodzica -
metoda
insertBefore,
która wstawia elementy przed elementem
