Metoden insertAdjacentElement
Metoden insertAdjacentElement tillader
at indsætte et element hvor som helst på siden.
Oftest bruges den efter oprettelse af et element
med createElement.
Koden indsættes i forhold til et referenceelement.
Det er muligt at indsætte før referenceelementet
(indstilling beforeBegin),
efter det (indstilling afterEnd),
samt i begyndelsen (indstilling afterBegin)
eller i slutningen (indstilling beforeEnd)
af referenceelementet.
Syntaks
referenceelement.insertAdjacentElement(indstilling, kode til indsættelse);
Eksempel . Indstilling beforeBegin
Lad referenceelementet være elementet #target.
Lad os indsætte en ny afsnit før det:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Resultat af kodeudførelse:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Eksempel . Indstilling afterEnd
Lad os nu indsætte en ny afsnit efter referenceelementet:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Resultat af kodeudførelse:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Eksempel . Indstilling afterBegin
Lad os indsætte en ny afsnit i begyndelsen af referenceelementet:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Resultat af kodeudførelse:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Eksempel . Indstilling beforeEnd
Lad os indsætte en ny afsnit i slutningen af referenceelementet:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Resultat af kodeudførelse:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Se også
-
metoden
insertAdjacentHTML,
som indsætter tags på et angivet sted -
metoden
insertAdjacentText,
som indsætter tekst på et angivet sted -
metoden
prepend,
som indsætter elementer i begyndelsen -
metoden
append,
som indsætter elementer i slutningen -
metoden
appendChild,
som indsætter elementer i slutningen af forælderen -
metoden
insertBefore,
som indsætter elementer før et element
