Metoda insertAdjacentText

Metoda insertAdjacentText umožňuje vložit řetězec na libovolné místo stránky. Řetězec je vložen vzhledem k referenčnímu elementu. Lze provést vložení před referenční element (způsob vložení 'beforeBegin'), po ném (způsob vložení 'afterEnd'), a také na začátek (způsob vložení 'afterBegin') nebo na konec (způsob vložení 'beforeEnd') referenčního elementu.

Syntaxe

javascriptreferenční element.insertAdjacentText(způsob vložení, text pro vložení);

Příklad . Způsob beforeBegin

Nechť referenční element - je to element #target. Vložme před něj nějaký text:

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

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

Výsledek provedení kódu:

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

Příklad . Způsob afterEnd

A nyní vložme nový odstavec za referenční element:

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

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

Výsledek provedení kódu:

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

Příklad . afterBegin

Vložme nový odstavec na začátek referenčního elementu:

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

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

Výsledek provedení kódu:

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

Příklad . Způsob beforeEnd

Vložme nový odstavec na konec referenčního elementu:

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

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

Výsledek provedení kódu:

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

Viz také