Methode insertAdjacentElement
De methode insertAdjacentElement maakt het mogelijk
om een element overal op de pagina in te voegen.
Wordt het vaakst gebruikt na het creëren van een element
met createElement.
De code wordt ingevoegd ten opzichte van het referentie-
element. Het is mogelijk om in te voegen vóór
het referentie-element (invoegmethode beforeBegin),
na het referentie-element (invoegmethode afterEnd),
evenals aan het begin (invoegmethode afterBegin)
of aan het einde (invoegmethode beforeEnd)
van het referentie-element.
Syntaxis
referentie element.insertAdjacentElement(invoegmethode, code in te voegen);
Voorbeeld . Methode beforeBegin
Stel dat het referentie-element het element #target is.
Laten we er een nieuwe alinea voor invoegen:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Resultaat van de code:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Voorbeeld . Methode afterEnd
Laten we nu een nieuwe alinea na het referentie- element invoegen:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Resultaat van de code:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Voorbeeld . Methode afterBegin
Laten we een nieuwe alinea aan het begin van het referentie-element invoegen:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Resultaat van de code:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Voorbeeld . Methode beforeEnd
Laten we een nieuwe alinea aan het einde van het referentie-element invoegen:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Resultaat van de code:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Zie ook
-
methode
insertAdjacentHTML,
die tags op een gespecificeerde plaats invoegt -
methode
insertAdjacentText,
die tekst op een gespecificeerde plaats invoegt -
methode
prepend,
die elementen aan het begin invoegt -
methode
append,
die elementen aan het einde invoegt -
methode
appendChild,
die elementen aan het einde van de ouder invoegt -
methode
insertBefore,
die elementen vóór een element invoegt
