Metóda insertAdjacentText

Metóda insertAdjacentText umožňuje vložiť reťazec na ľubovoľné miesto stránky. Reťazec je vložený vzhľadom na referenčný element. Je možné vykonať vloženie pred referenčný element (spôsob vloženia 'beforeBegin'), po ňom (spôsob vloženia 'afterEnd'), ako aj na začiatok (spôsob vloženia 'afterBegin') alebo na koniec (spôsob vloženia 'beforeEnd') referenčného elementu.

Syntax

javascriptreferenčný element.insertAdjacentText(spôsob vloženia, text pre vloženie);

Príklad . Spôsob beforeBegin

Nech referenčný element je element #target. Vložme pred neho nejaký text:

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

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

Výsledok vykonania kódu:

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

Príklad . Spôsob afterEnd

A teraz vložme nový odsek po referenčnom elemente:

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

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

Výsledok vykonania kódu:

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

Príklad . afterBegin

Vložme nový odsek na začiatok referenčného elementu:

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

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

Výsledok vykonania kódu:

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

Príklad . Spôsob beforeEnd

Vložme nový odsek na koniec referenčného elementu:

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

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

Výsledok vykonania kódu:

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

Pozri tiež