Metodo insertAdjacentText

Il metodo insertAdjacentText consente di inserire una stringa in qualsiasi punto della pagina. La stringa viene inserita relativamente a un elemento di riferimento. È possibile effettuare l'inserimento prima dell'elemento di riferimento (modalità di inserimento 'beforeBegin'), dopo di esso (modalità di inserimento 'afterEnd'), oppure all'inizio (modalità di inserimento 'afterBegin') o alla fine (modalità di inserimento 'beforeEnd') dell'elemento di riferimento.

Sintassi

javascriptelemento di riferimento.insertAdjacentText(modalità di inserimento, testo da inserire);

Esempio . Modalità beforeBegin

Supponiamo che l'elemento di riferimento sia l'elemento #target. Inseriamo prima di esso del testo:

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

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

Risultato dell'esecuzione del codice:

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

Esempio . Modalità afterEnd

Ora inseriamo del testo dopo l'elemento di riferimento:

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

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

Risultato dell'esecuzione del codice:

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

Esempio . afterBegin

Inseriamo del testo all'inizio dell'elemento di riferimento:

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

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

Risultato dell'esecuzione del codice:

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

Esempio . Modalità beforeEnd

Inseriamo del testo alla fine dell'elemento di riferimento:

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

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

Risultato dell'esecuzione del codice:

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

Vedi anche