Az insertAdjacentElement metódus

A insertAdjacentElement metódus lehetővé teszi egy elem beszúrását az oldal bármely pontjára. Leggyakrabban az createElement segítségével létrehozott elemek beszúrására használják. A kód egy referenciaelemhez képest kerül beszúrásra. Beszúrhatunk a referenciaelem elé (a beszúrás módja: beforeBegin), utána (a beszúrás módja: afterEnd), valamint a referenciaelem elejére (a beszúrás módja: afterBegin) végére (a beszúrás módja: beforeEnd).

Szintaxis

javascriptreferenciaelem.insertAdjacentElement(beszúrás módja, beszúrandó elem);

Példa . A beforeBegin mód

Tegyük fel, hogy a referenciaelem a #target elem. Szúrjunk be elé egy új bekezdést:

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

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

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

A kód végrehajtásának eredménye:

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

Példa . A afterEnd mód

Most pedig szúrjunk be egy új bekezdést a referenciaelem után:

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

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

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

A kód végrehajtásának eredménye:

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

Példa . A afterBegin mód

Szúrjunk be egy új bekezdést a referenciaelem elejére:

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

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

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

A kód végrehajtásának eredménye:

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

Példa . A beforeEnd mód

Szúrjunk be egy új bekezdést a referenciaelem végére:

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

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

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

A kód végrehajtásának eredménye:

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

Lásd még