insertBefore Metode

Die insertBefore metode laat jou toe om 'n element voor 'n ander element te plaas. Dit word meestal gebruik nadat 'n element geskep is met createElement. Die metode word toegepas op die ouer van die element waarvoor die plasing sal plaasvind.

Sintaksis

ouer.insertBefore(element, voor wie om te plaas);

Voorbeeld

Laat ons 'n paragraaf skep en dit voor die tweede paragraaf plaas:

<div id="parent">
	<p>elem 1</p>
	<p id="before">elem 2</p>
	<p>elem 3</p>
</div>

let parent = document.querySelector('#parent');
let before = document.querySelector('#before');

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

parent.insertBefore(p, before);

Resultaat van kode-uitvoering:

<div id="parent">
	<p>elem 1</p>
	<p>!</p>
	<p id="before">elem 2</p>
	<p>elem 3</p>
</div>

Voorbeeld

Kom ons voeg 'n paragraaf aan die begin van element #parent by. Om dit te doen, plaas ons ons paragraaf voor die eerste nakomeling van #parent. Hierdie nakomeling kan gevind word met firstElementChild:

<div id="parent">
	<p>elem 1</p>
	<p>elem 2</p>
</div>

let parent = document.querySelector('#parent');

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

parent.insertBefore(p, parent.firstElementChild);

Resultaat van kode-uitvoering:

<div id="parent">
	<p>!</p>
	<p>elem 1</p>
	<p>elem 2</p>
</div>

Voorbeeld

Wanneer die tweede parameter null oorgedra word, werk die insertBefore metode soos appendChild. Terselfdertyd, as die element geen kindelemente het nie, retourneer firstElementChild null. Gevolglik kan 'n mens by die begin van 'n element byvoeg selfs wanneer dit geen kindelemente het nie:

<div id="parent"></div>

let parent = document.querySelector('#parent');

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

parent.insertBefore(p, parent.firstChild);

Resultaat van kode-uitvoering:

<div id="parent">
	<p>!</p>
</div>

Sien ook

metode prepend,
wat elemente aan die begin plaas
metode appendChild,
wat elemente aan die einde van die ouer plaas
metode insertAdjacentElement,
wat 'n element op 'n gespesifiseerde plek plaas
metode insertAdjacentHTML,
wat etikette op 'n gespesifiseerde plek plaas