Metoda insertAdjacentText
Metoda insertAdjacentText umożliwia
wstawienie ciągu znaków w dowolne miejsce strony. Ciąg znaków
jest wstawiany względem elementu odniesienia.
Można dokonać wstawienia przed elementem odniesienia
(sposób wstawiania 'beforeBegin'), po
nim (sposób wstawiania 'afterEnd'), a
także na początku (sposób wstawiania 'afterBegin')
lub na końcu (sposób wstawiania 'beforeEnd')
elementu odniesienia.
Składnia
element odniesienia.insertAdjacentText(sposób wstawiania, tekst do wstawienia);
Przykład . Sposób beforeBegin
Niech elementem odniesienia będzie element #target.
Wstawmy przed nim jakiś tekst:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'tekst');
Wynik wykonania kodu:
tekst
<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 target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'tekst');
Wynik wykonania kodu:
<div id="target">
<p>elem</p>
</div>
tekst
Przykład . afterBegin
Wstawmy nowy akapit na początku elementu odniesienia:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'tekst');
Wynik wykonania kodu:
<div id="target">
tekst
<p>elem</p>
</div>
Przykład . Sposób beforeEnd
Wstawmy nowy akapit na końcu elementu odniesienia:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'tekst');
Wynik wykonania kodu:
<div id="target">
<p>elem</p>
tekst
</div>
Zobacz też
-
metoda
insertAdjacentElement,
która wstawia element w określone miejsce -
metoda
insertAdjacentHTML,
która wstawia kod w określone miejsce -
metoda
prepend,
która wstawia elementy na początku -
metoda
append,
która wstawia elementy na końcu -
metoda
appendChild,
która wstawia elementy na końcu rodzica -
metoda
insertBefore,
która wstawia elementy przed elementem
