Metoden insertAdjacentElement
Metoden insertAdjacentElement tillater
å sette inn et element hvor som helst på siden.
Oftest brukes den etter å ha opprettet et element
med createElement.
Koden settes inn i forhold til referanseelementet.
Man kan sette inn før referanseelementet (innsettingsmåte beforeBegin),
etter det (innsettingsmåte afterEnd),
samt i begynnelsen (innsettingsmåte afterBegin)
eller på slutten (innsettingsmåte beforeEnd)
av referanseelementet.
Syntaks
referanseelement.insertAdjacentElement(innsettingsmåte, kode for innsetting);
Eksempel . Måte beforeBegin
La referanseelementet være elementet #target.
La oss sette inn et nytt avsnitt 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 av kjøring av kode:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Eksempel . Måte afterEnd
La oss nå sette inn et nytt avsnitt etter referanseelementet:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Resultat av kjøring av kode:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Eksempel . Måte afterBegin
La oss sette inn et nytt avsnitt i begynnelsen av referanseelementet:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Resultat av kjøring av kode:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Eksempel . Måte beforeEnd
La oss sette inn et nytt avsnitt på slutten av referanseelementet:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Resultat av kjøring av kode:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Se også
-
metoden
insertAdjacentHTML,
som setter inn tagger på angitt sted -
metoden
insertAdjacentText,
som setter inn tekst på angitt sted -
metoden
prepend,
som setter inn elementer i begynnelsen -
metoden
append,
som setter inn elementer på slutten -
metoden
appendChild,
som setter inn elementer på slutten av forelderen -
metoden
insertBefore,
som setter inn elementer før elementet
