Fungsi prepend() dalam Javascript

By Admin Sunday, March 8, 2020 0 0

Fungsi prepend() dalam Javascript - Hallo sahabat Situs Pendidikan Masa Kini - Patih Akbar, Pada Artikel yang anda baca kali ini dengan judul Fungsi prepend() dalam Javascript, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Javascript, yang kami tulis ini dapat anda pahami. dengan mudah, selamat membaca.

Judul : Fungsi prepend() dalam Javascript
link : Fungsi prepend() dalam Javascript

Fungsi prepend() dalam Javascript

Fungsi prepend() ini berguna untuk menambahkan sebuah element di dalam element induk tanpa menghaspus element anak lainya yang berada di dalam element induk.

Contoh kasus saya ingin menambahkan elemen DIV di dalam sebuah element div induk dengan id='idInduk'. Codenya seperti berikut :

<div id='idInduk'>
<!-- Saya ingin menambahkan element DIV disini -->
<div id='idAnak1'></div>
<div id='idAnak2'></div>
<div id='idAnak2'></div>
</div>

Dari code di atas, saya ingin menambahkan sebuah element DIV pada tulisan yang saya beri warna merah. Tetapi saya tidak ingin menghapus element DIV dibawahnya.

Nah, kita dapat menggunakan sebuah fungsi prepend() sebagai berikut :

<script>
var elementInduk = document.getElementById('idInduk');
var tambahElement = document.createElement('div');

elementInduk.prepend(tambahElement);
</script>

Nah, bagaimana untuk menambah properti seperti ID, CLASS dan properti lain di dalam element yang sudah di buat barusan. Caranya yaitu kamu harus mendeklarasikan fungsi propertinya terlebih dahulu sebelum di eksekusi oleh prepend(). Jadi codenya seperti berkut :

<script>
var elementInduk = document.getElementById('idInduk');
var tambahElement = document.createElement('div');

tambahElement.id = 'idAnak0';
tambahElement.className = 'classIdAnak';
tambahElement.innerHTML = 'Hai';

elementInduk.prepend(tambahElement);
</script>

Jika code di atas dijalankan maka akan dihasilkan sebuah DOM HTML sebagai berikut :

<div id='idInduk'>
<div id='idAnak0' class='classIdAnak'>Hai</div>
<div id='idAnak1'></div>
<div id='idAnak2'></div>
<div id='idAnak2'></div>
</div>

Terlihat bahwa fungsi ini berbeda degan fungsi innerHTML yang akan menghapus seluruh isi element anak tersebut lalu menggantinya dengan element anak baru.

Mungkin ini saja yang bisa saya berikan. Jika ada yang ingin ditanyakan silahkan berkomentar di bawah.
Terimakasih sudah berkunjung.

Demikianlah Artikel Tentang Fungsi prepend() dalam Javascript

Semoga dengan membaca artikel Fungsi prepend() dalam Javascript ini, bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel kami yang lainnya. Dan jangan lupa di share yaa

Anda sekarang membaca artikel Fungsi prepend() dalam Javascript dengan alamat link https://patihakbar.blogspot.com/2020/03/fungsi-prepend-dalam-javascript.html