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

javascriptverwysingselement.insertAdjacentElement(insetwyse, kode om in te voeg);

Voorbeeld . Insetwyse beforeBegin

Laat die verwysingselement wees element #target. Laat ons 'n nuwe paragraaf voor dit invoeg:

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

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

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

Resultaat van die kode-uitvoering:

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

Voorbeeld . Insetwyse afterEnd

En nou, laat ons 'n nuwe paragraaf ná die verwysingselement invoeg:

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

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

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

Resultaat van die kode-uitvoering:

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

Voorbeeld . Insetwyse afterBegin

Laat ons 'n nuwe paragraaf aan die begin van die verwysingselement invoeg:

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

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

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

Resultaat van die kode-uitvoering:

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

Voorbeeld . Insetwyse beforeEnd

Laat ons 'n nuwe paragraaf aan die einde van die verwysingselement invoeg:

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

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

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

Resultaat van die kode-uitvoering:

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

Sien ook