Metode insertAdjacentElement
Metode insertAdjacentElement ļauj
ievietot elementu jebkurā lapas vietā.
Visbiežāk tiek izmantota pēc elementa izveides
ar createElement.
Kods tiek ievietots attiecībā pret atsances
elementu. Var veikt ievietošanu pirms
atsances elementa (ievietošanas veids beforeBegin),
pēc tā (ievietošanas veids afterEnd),
kā arī sākumā (ievietošanas veids afterBegin)
vai beigās (ievietošanas veids beforeEnd)
atsances elementa.
Sintakse
atsances elements.insertAdjacentElement(ievietošanas veids, kods ievietošanai);
Piemērs . Veids beforeBegin
Lai atsances elements ir elements #target.
Ievietosim pirms tā jaunu rindkopu:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Koda izpildes rezultāts:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Piemērs . Veids afterEnd
Un tagad ievietosim jaunu rindkopu pēc atsances elementa:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Koda izpildes rezultāts:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Piemērs . Veids afterBegin
Ievietosim jaunu rindkopu atsances elementa sākumā:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Koda izpildes rezultāts:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Piemērs . Veids beforeEnd
Ievietosim jaunu rindkopu atsances elementa beigās:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Koda izpildes rezultāts:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Skatiet arī
-
metode
insertAdjacentHTML,
kas ievieto atzīmes norādītajā vietā -
metode
insertAdjacentText,
kas ievieto tekstu norādītajā vietā -
metode
prepend,
kas ievieto elementus sākumā -
metode
append,
kas ievieto elementus beigās -
metode
appendChild,
kas ievieto elementus vecāka beigās -
metode
insertBefore,
kas ievieto elementus pirms elementa
