Metodi insertAdjacentText

Metodi insertAdjacentText mahdollistaa merkkijonon lisäämisen mihin tahansa kohtaan sivulla. Merkkijono lisätään suhteessa vertailuelementtiin. Voidaan tehdä lisäys ennen vertailuelementtiä (lisäystapa 'beforeBegin'), sen jälkeen (lisäystapa 'afterEnd'), sekä alkuun (lisäystapa 'afterBegin') tai loppuun (lisäystapa 'beforeEnd') vertailuelementtiä.

Syntaksi

javascriptvertailuelementti.insertAdjacentText(lisäystapa, lisättävä teksti);

Esimerkki . Tapa beforeBegin

Olkoon vertailuelementti elementti #target. Lisätään ennen sitä jotain tekstiä:

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa afterEnd

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

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

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

Koodin suorituksen tulos:

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

Esimerkki . afterBegin

Lisätään uusi kappale vertailuelementin alkuun:

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa beforeEnd

Lisätään uusi kappale vertailuelementin loppuun:

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

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

Koodin suorituksen tulos:

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

Katso myös