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
referenselement.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:
<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 exekverad kod:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Exempel . Infogningssätt afterEnd
Låt oss nu infoga ett nytt stycke efter referenselementet:
<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 exekverad kod:
<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:
<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 exekverad kod:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Exempel . Infogningssätt beforeEnd
Låt oss infoga ett nytt stycke i slutet av referenselementet:
<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 exekverad kod:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Se även
-
metoden
insertAdjacentHTML,
som infogar taggar på en angiven plats -
metoden
insertAdjacentText,
som infogar text på en angiven plats -
metoden
prepend,
som infogar element i början -
metoden
append,
som infogar element i slutet -
metoden
appendChild,
som infogar element i slutet av föräldern -
metoden
insertBefore,
som infogar element före ett element
