Metoden insertAdjacentElement

Metoden insertAdjacentElement låter dig infoga ett element var som helst på sidan. Den används oftast efter att ett element har skapats med createElement. Koden infogas i förhållande till ett referenselement. Du kan infoga före referenselementet (infogningssätt beforeBegin), efter det (infogningssätt afterEnd), samt i början (infogningssätt afterBegin) eller i slutet (infogningssätt beforeEnd) av referenselementet.

Syntax

javascriptreferenselement.insertAdjacentElement(infogningssätt, kod att infoga);

Exempel . Infogningssätt beforeBegin

Låt referenselementet vara elementet #target. Låt oss infoga ett nytt stycke före 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 exekverad kod:

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

Exempel . Infogningssätt afterEnd

Låt oss nu infoga ett nytt stycke efter referenselementet:

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

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

Exempel . Infogningssätt afterBegin

Låt oss infoga ett nytt stycke i början av referenselementet:

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

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

Exempel . Infogningssätt beforeEnd

Låt oss infoga ett nytt stycke i slutet av referenselementet:

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

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

Se även