Kaedah prepend

Kaedah prepend membolehkan anda memasukkan elemen lain pada awal mana-mana elemen. Parameter kaedah menerima elemen, biasanya dicipta melalui createElement, atau rentetan. Anda boleh menambah beberapa elemen atau rentetan sekaligus, dengan menyenaraikannya dipisahkan koma.

Sintaks

ibuBapa.prepend(elemen atau rentetan);

Contoh

Mari kita buat perenggan, tetapkan teksnya dan letakkan pada halaman di awal blok #parent:

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

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

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

parent.prepend(p);

Keputusan pelaksanaan kod:

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

Contoh

Mari letakkan beberapa perenggan sekaligus pada awal blok #parent:

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

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

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.prepend(p1, p2);

Keputusan pelaksanaan kod:

<div id="parent">
	<p>b</p>
	<p>a</p>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Contoh

Mari kita gunakan rentetan sebagai parameter kaedah:

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

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

Keputusan pelaksanaan kod:

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

Lihat juga

kaedah append,
yang memasukkan elemen pada akhir
kaedah appendChild,
yang memasukkan elemen pada akhir
kaedah insertBefore,
yang memasukkan elemen sebelum elemen
kaedah insertAdjacentElement,
yang memasukkan elemen di tempat yang ditentukan
kaedah insertAdjacentHTML,
yang memasukkan tag di tempat yang ditentukan