Metoda insertAdjacentHTML

Metoda insertAdjacentHTML umożliwia wstawienie ciągu kodu HTML w dowolne miejsce strony. 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ątku (sposób wstawienia 'afterBegin') lub na końcu (sposób wstawienia 'beforeEnd') elementu odniesienia.

Składnia

javascriptelement odniesienia.insertAdjacentHTML(sposób wstawienia, kod do wstawienia);

Przykład . Sposób beforeBegin

Niech elementem odniesienia będzie element #target. Wstawmy przed nim nowy akapit:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

Wynik wykonania kodu:

html<p>!</p>
<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.insertAdjacentHTML('afterEnd', '<p>!</p>');

Wynik wykonania kodu:

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

Przykład . Sposób afterBegin

Wstawmy nowy akapit na początku elementu odniesienia:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

Wynik wykonania kodu:

html<div id="target">
  <p>!</p>
  <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.insertAdjacentHTML('beforeEnd', '<p>!</p>');

Wynik wykonania kodu:

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

Zobacz też