Menambahkan Elemen jQuery menggunakan Method prepend()

Hello guys! Kembali lagi bersama Miniblog dari Inzaghi's Blog! Jika sebelumnya sudah membuat jQuery DOM Manipulation, kali ini kita akan membuat Program menambahkan Elemen jQuery menggunakan Method prepend().

Sumber : Tutorialspoint.com

Untuk Software-nya, Anda bisa menggunakan Notepad++, Sublime Text, ataupun VS Code, dan ditampilkan melalui Browser Anda. Bahkan Anda juga bisa menggunakan Online Compiler yang ada di Internet seperti ProgramizOneCompilerOnlineGDB, dll.


Metode jQuery prepend() menambahkan konten di awal setiap elemen yang cocok. Anda juga dapat menambahkan beberapa elemen dalam satu panggilan fungsi.

Berikut adalah Sintaks dari metode prepend() :

$(selector).prepend(content, [content]);

Di sini, parameter konten bisa berupa string HTML, elemen DOM, node teks, array elemen dan node teks, atau objek jQuery untuk disisipkan di awal setiap elemen dalam kumpulan elemen yang cocok.

Pertimbangkan konten HTML berikut :

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Sekarang jika kita menerapkan metode prepend() sebagai berikut :

$(".inner").prepend("<p>Inzaghi</p>");

Ini akan menghasilkan hasil berikut :

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">
   <p>Inzaghi</p>
   Hello
   </div>
   <div class="inner">
   <p>Inzaghi</p>
   Goodbye
   </div>
</div>

Contohnya :

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").prepend("<p>Inzaghi</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prepend() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

Hasil Output :


Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)

Post a Comment

Previous Post Next Post