insertAdjacentElement-metode
Die metode insertAdjacentElement laat toe
om 'n element enige plek op die bladsy in te voeg.
Dit word meestal gebruik nadat 'n element geskep is
met createElement.
Die kode word ingevoeg relatief tot die verwysingselement.
Dit kan voor die verwysingselement ingevoeg word (insetwyse beforeBegin),
daarna (insetwyse afterEnd),
asook aan die begin (insetwyse afterBegin)
of aan die einde (insetwyse beforeEnd)
van die verwysingselement.
Sintaksis
verwysingselement.insertAdjacentElement(insetwyse, kode om in te voeg);
Voorbeeld . Insetwyse beforeBegin
Laat die verwysingselement wees element #target.
Laat ons 'n nuwe paragraaf voor dit invoeg:
<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 die kode-uitvoering:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Voorbeeld . Insetwyse afterEnd
En nou, laat ons 'n nuwe paragraaf ná die verwysingselement invoeg:
<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 die kode-uitvoering:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Voorbeeld . Insetwyse afterBegin
Laat ons 'n nuwe paragraaf aan die begin van die verwysingselement invoeg:
<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 die kode-uitvoering:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Voorbeeld . Insetwyse beforeEnd
Laat ons 'n nuwe paragraaf aan die einde van die verwysingselement invoeg:
<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 die kode-uitvoering:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Sien ook
-
metode
insertAdjacentHTML,
wat etikette op 'n gegewe plek invoeg -
metode
insertAdjacentText,
wat teks op 'n gegewe plek invoeg -
metode
prepend,
wat elemente aan die begin invoeg -
metode
append,
wat elemente aan die einde invoeg -
metode
appendChild,
wat elemente aan die einde van die ouer invoeg -
metode
insertBefore,
wat elemente voor 'n element invoeg
