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

javascriptatsances elements.insertAdjacentElement(ievietošanas veids, kods ievietošanai);

Piemērs . Veids beforeBegin

Lai atsances elements ir elements #target. Ievietosim pirms tā jaunu rindkopu:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

Koda izpildes rezultāts:

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

Piemērs . Veids afterEnd

Un tagad ievietosim jaunu rindkopu pēc atsances elementa:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

Koda izpildes rezultāts:

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

Piemērs . Veids afterBegin

Ievietosim jaunu rindkopu atsances elementa sākumā:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

Koda izpildes rezultāts:

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

Piemērs . Veids beforeEnd

Ievietosim jaunu rindkopu atsances elementa beigās:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

Koda izpildes rezultāts:

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

Skatiet arī