Metoda insertAdjacentElement
Metoda insertAdjacentElement omogoča
vstavitev elementa na katero koli mesto strani.
Najpogosteje se uporablja po ustvarjanju elementa
z createElement.
Koda se vstavi glede na referenčni
element. Možno je vstaviti pred
referenčni element (način vstavljanja beforeBegin),
za njim (način vstavljanja afterEnd),
pa tudi na začetek (način vstavljanja afterBegin)
ali na konec (način vstavljanja beforeEnd)
referenčnega elementa.
Sintaksa
referenčni element.insertAdjacentElement(način vstavljanja, koda za vstavljanje);
Primer . Način beforeBegin
Naj bo referenčni element element #target.
Vstavimo nov odstavek pred njim:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Rezultat izvajanja kode:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Primer . Način afterEnd
Zdaj pa vstavimo nov odstavek za referenčnim elementom:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Rezultat izvajanja kode:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Primer . Način afterBegin
Vstavimo nov odstavek na začetek referenčnega 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 izvajanja kode:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Primer . Način beforeEnd
Vstavimo nov odstavek na konec referenčnega 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 izvajanja kode:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Glejte tudi
-
metoda
insertAdjacentHTML,
ki vstavi oznake na določeno mesto -
metoda
insertAdjacentText,
ki vstavi besedilo na določeno mesto -
metoda
prepend,
ki vstavi elemente na začetek -
metoda
append,
ki vstavi elemente na konec -
metoda
appendChild,
ki vstavi elemente na konec starša -
metoda
insertBefore,
ki vstavi elemente pred element
