Metode prepend

Metode prepend memungkinkan untuk memasukkan ke dalam awal suatu elemen, elemen lain. Sebagai parameternya, metode menerima elemen, yang biasanya dibuat melalui createElement, atau sebuah string. Beberapa elemen atau string dapat ditambahkan sekaligus, dengan memisahkannya menggunakan koma.

Sintaks

induk.prepend(elemen atau string);

Contoh

Mari kita buat sebuah paragraf, atur teksnya dan tempatkan 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);

Hasil eksekusi kode:

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

Contoh

Mari tempatkan beberapa paragraf sekaligus di 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);

Hasil eksekusi kode:

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

Contoh

Mari kita gunakan string sebagai parameter metode:

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

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

Hasil eksekusi kode:

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

Lihat juga

metode append,
yang memasukkan elemen ke akhir
metode appendChild,
yang memasukkan elemen ke akhir
metode insertBefore,
yang memasukkan elemen sebelum suatu elemen
metode insertAdjacentElement,
yang memasukkan elemen ke tempat yang ditentukan
metode insertAdjacentHTML,
yang memasukkan tag ke tempat yang ditentukan