Metod insertAdjacentElement
Metod insertAdjacentElement omogućava
umetanje elementa na bilo koje mesto stranice.
Najčešće se koristi nakon kreiranja elementa
pomoću createElement.
Kod se umeće u odnosu na referentni
element. Može se izvršiti umetanje ispred
referentnog elementa (način umetanja beforeBegin),
posle njega (način umetanja afterEnd),
kao i na početak (način umetanja afterBegin)
ili na kraj (način umetanja beforeEnd)
referentnog elementa.
Sintaksa
referentni element.insertAdjacentElement(način umetanja, kod za umetanje);
Primer . Način beforeBegin
Neka je referentni element element #target.
Umetnimo ispred njega novi pasus:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Rezultat izvršavanja koda:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Primer . Način afterEnd
A sada umetnimo novi pasus posle referentnog elementa:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Rezultat izvršavanja koda:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Primer . Način afterBegin
Umetnimo novi pasus na početak referentnog elementa:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Rezultat izvršavanja koda:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Primer . Način beforeEnd
Umetnimo novi pasus na kraj referentnog elementa:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Rezultat izvršavanja koda:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Pogledajte takođe
-
metod
insertAdjacentHTML,
koji umeće tagove na zadato mesto -
metod
insertAdjacentText,
koji umeće tekst na zadato mesto -
metod
prepend,
koji umeće elemente na početak -
metod
append,
koji umeće elemente na kraj -
metod
appendChild,
koji umeće elemente na kraj roditelja -
metod
insertBefore,
koji umeće elemente ispred elementa
