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

javascriptelement 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:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'tekst');

Wynik wykonania kodu:

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

Przykład . Sposób afterEnd

A teraz wstawmy nowy akapit po elemencie odniesienia:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'tekst');

Wynik wykonania kodu:

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

Przykład . afterBegin

Wstawmy nowy akapit na początku elementu odniesienia:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'tekst');

Wynik wykonania kodu:

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

Przykład . Sposób beforeEnd

Wstawmy nowy akapit na końcu elementu odniesienia:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'tekst');

Wynik wykonania kodu:

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

Zobacz też