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
vertailuelementti.insertAdjacentText(lisäystapa, lisättävä teksti);
Esimerkki . Tapa beforeBegin
Olkoon vertailuelementti elementti #target.
Lisätään ennen sitä jotain tekstiä:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'teksti');
Koodin suorituksen tulos:
teksti
<div id="target">
<p>elem</p>
</div>
Esimerkki . Tapa afterEnd
Lisätään nyt uusi kappale vertailuelementin jälkeen:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'teksti');
Koodin suorituksen tulos:
<div id="target">
<p>elem</p>
</div>
teksti
Esimerkki . afterBegin
Lisätään uusi kappale vertailuelementin alkuun:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'teksti');
Koodin suorituksen tulos:
<div id="target">
teksti
<p>elem</p>
</div>
Esimerkki . Tapa beforeEnd
Lisätään uusi kappale vertailuelementin loppuun:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'teksti');
Koodin suorituksen tulos:
<div id="target">
<p>elem</p>
teksti
</div>
Katso myös
-
metodi
insertAdjacentElement,
joka lisää elementin määritettyyn paikkaan -
metodi
insertAdjacentHTML,
joka lisää koodin määritettyyn paikkaan -
metodi
prepend,
joka lisää elementit alkuun -
metodi
append,
joka lisää elementit loppuun -
metodi
appendChild,
joka lisää elementit vanhemman loppuun -
metodi
insertBefore,
joka lisää elementit ennen elementtiä
