Meetod insertAdjacentElement

Meetod insertAdjacentElement võimaldab sisestada elemendi lehe suvalisse kohta. Seda kasutatakse kõige sagedamini pärast elemendi loomist kasutades createElement. Kood sisestatakse võrreldes tugielemendiga. Saab teha sisestuse enne tugielementi (sisestusviis beforeBegin), pärast seda (sisestusviis afterEnd), samuti algusesse (sisestusviis afterBegin) või lõppu (sisestusviis beforeEnd) tugielemendist.

Süntaks

javascripttugielement.insertAdjacentElement(sisestusviis, sisestatav kood);

Näide . Viis beforeBegin

Olgu tugielemendiks element #target. Sisestame selle ette uue lõigu:

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

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

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

Koodi täitmise tulemus:

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

Näide . Viis afterEnd

Nüüd sisestame uue lõigu pärast tugielementi:

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

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

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

Koodi täitmise tulemus:

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

Näide . Viis afterBegin

Sisestame uue lõigu tugielemendi algusesse:

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

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

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

Koodi täitmise tulemus:

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

Näide . Viis beforeEnd

Sisestame uue lõigu tugielemendi lõppu:

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

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

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

Koodi täitmise tulemus:

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

Vaata ka