Methode insertAdjacentText

De methode insertAdjacentText maakt het mogelijk om een string overal op de pagina in te voegen. De string wordt ingevoegd ten opzichte van een referentie-element. Het is mogelijk om de invoer voor het referentie-element te plaatsen (invoermethode 'beforeBegin'), na het element (invoermethode 'afterEnd'), of aan het begin (invoermethode 'afterBegin') of aan het einde (invoermethode 'beforeEnd') van het referentie-element.

Syntaxis

javascriptreferentie element.insertAdjacentText(invoermethode, in te voegen tekst);

Voorbeeld . Methode beforeBegin

Stel dat het referentie-element het element #target is. Laten we er wat tekst voor invoegen:

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

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

Resultaat van de code:

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

Voorbeeld . Methode afterEnd

Laten we nu een nieuwe paragraaf na het referentie-element invoegen:

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

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

Resultaat van de code:

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

Voorbeeld . afterBegin

Laten we een nieuwe paragraaf aan het begin van het referentie-element invoegen:

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

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

Resultaat van de code:

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

Voorbeeld . Methode beforeEnd

Laten we een nieuwe paragraaf aan het einde van het referentie-element invoegen:

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

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

Resultaat van de code:

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

Zie ook