insertAdjacentHTML-metodi

insertAdjacentHTML-metodi mahdollistaa HTML-koodimerkkijonon lisäämisen mihin tahansa kohtaan sivulla. Koodi lisätään suhteessa viiteelementtiin. Lisäyksen voi tehdä ennen viiteelementtiä (lisätapa 'beforeBegin'), sen jälkeen (lisätapa 'afterEnd'), tai myös alkuun (lisätapa 'afterBegin') tai loppuun (lisätapa 'beforeEnd') viiteelementtiä.

Syntaksi

javascriptviiteelementti.insertAdjacentHTML(lisätapa, lisättävä koodi);

Esimerkki . Tapa beforeBegin

Olkoon viiteelementti elementti #target. Lisätään ennen sitä uusi kappale:

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa afterEnd

Lisätään nyt uusi kappale viiteelementin jälkeen:

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa afterBegin

Lisätään uusi kappale viiteelementin alkuun:

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa beforeEnd

Lisätään uusi kappale viiteelementin loppuun:

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

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

Koodin suorituksen tulos:

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

Katso myös