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

referenciaelem.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:

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

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

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

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

<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:

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

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

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

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

<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:

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

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

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

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

<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:

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

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

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

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

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

Lásd még

a insertAdjacentHTML metódus,
amely HTML-t szúr be egy megadott helyre
a insertAdjacentText metódus,
amely szöveget szúr be egy megadott helyre
a prepend metódus,
amely elemeket szúr be az elejére
a append metódus,
amely elemeket szúr be a végére
a appendChild metódus,
amely elemeket szúr be a szülő végére
a insertBefore metódus,
amely elemeket szúr be egy elem elé

Az insertAdjacentElement metódus

Szintaxis

Példa . A beforeBegin mód

Példa . A afterEnd mód

Példa . A afterBegin mód

Példa . A beforeEnd mód

Lásd még

Példa . A `beforeBegin` mód

Példa . A `afterEnd` mód

Példa . A `afterBegin` mód

Példa . A `beforeEnd` mód