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

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

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

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

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

Resultat av kjøring av kode:

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

Eksempel . Måte afterEnd

La oss nå sette inn et nytt avsnitt etter referanseelementet:

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

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

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

Resultat av kjøring av kode:

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

Eksempel . Måte afterBegin

La oss sette inn et nytt avsnitt i begynnelsen av referanseelementet:

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

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

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

Resultat av kjøring av kode:

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

Eksempel . Måte beforeEnd

La oss sette inn et nytt avsnitt på slutten av referanseelementet:

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

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

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

Resultat av kjøring av kode:

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

Se også