Dengan jQuery, mudah untuk menambahkan elemen / konten baru.
Section Artikel
Tambahkan Konten HTML Baru
Kita akan menggunakan empat metode jQuery yang digunakan untuk menambahkan konten baru:
append()– Menyisipkan konten di akhir elemen yang dipilihprepend()– Menyisipkan konten di awal elemen yang dipilihsetelah()– Menyisipkan konten setelah elemen yang dipilihbefore()– Menyisipkan konten sebelum elemen yang dipilih
Metode jQuery append()
Metode append() jQuery menyisipkan konten PADA AKHIR elemen HTML yang dipilih.
Contoh :
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Appended item</li>"); }); }); </script> </head> <body> <p>Ini paragraph 1.</p> <p>Ini paragraph 2.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">Tambah text</button> <button id="btn2">Tambah list items</button> </body> </html>
Metode jQuery prepend()
Metode jQuery prepend() menyisipkan konten DI AWAL elemen HTML yang dipilih.
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body>
<p>Ini paragraph 1.</p>
<p>Ini paragraph 2.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>
Tambahkan Beberapa Elemen Baru Dengan append() dan prepend()
Dalam kedua contoh di atas, kita hanya menyisipkan beberapa teks / HTML di awal / akhir elemen HTML yang dipilih.
Namun, metode append() dan prepend() dapat menggunakan elemen baru dalam jumlah tak terbatas sebagai parameter. Elemen baru dapat dibuat dengan teks / HTML (seperti yang telah kita lakukan pada contoh di atas) dengan jQuery atau dengan kode JavaScript dan elemen DOM.
Dalam contoh berikut, kita akan membuat beberapa elemen baru. Elemen dibuat dengan teks / HTML, jQuery, dan JavaScript / DOM. Kemudian kita tambahkan elemen baru ke teks dengan metode append() (ini akan bekerja untuk prepend() juga):
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function appendText() {
var txt1 = "<p>Text.</p>"; // buat text with HTML
var txt2 = $("<p></p>").text("Text."); // buat text with jQuery
var txt3 = document.createElement("p");
txt3.innerHTML = "Text."; // buat text with DOM
$("body").append(txt1, txt2, txt3); // tambah new elements
}
</script>
</head>
<body>
<p>Ini paragraph.</p>
<button onclick="appendText()">Tambah text</button>
</body>
</html>
Metode jQuery after() dan before()
Metode jQuery after() menyisipkan konten SETELAH elemen HTML yang dipilih.
Metode jQuery before() menyisipkan konten SEBELUM elemen HTML yang dipilih.
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="https://dosenit.com/wp-content/uploads/2020/10/ookstore-1.jpg" alt="jQuery" width="100" height="140"><br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>
Tambahkan Beberapa Elemen Baru Dengan after() dan before()
Selain itu, metode after() dan before() dapat menggunakan elemen baru dalam jumlah tak terbatas sebagai parameter. Elemen baru dapat dibuat dengan teks / HTML (seperti yang telah kita lakukan pada contoh di atas), dengan jQuery atau dengan kode JavaScript dan elemen DOM.
Dalam contoh berikut, kita akan membuat beberapa elemen baru. Elemen dibuat dengan teks / HTML, jQuery, dan JavaScript / DOM. Kemudian kita masukkan elemen baru ke teks dengan metode after() (ini akan bekerja untuk before() juga):
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function afterText() {
var txt1 = "<b>I </b>"; // Buat element with HTML
var txt2 = $("<i></i>").text("love "); // Buat with jQuery
var txt3 = document.createElement("b"); // Buat with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // Sisipkan elemen baru setelah img
}
</script>
</head>
<body>
<img src="https://dosenit.com/wp-content/uploads/2020/10/ookstore-1.jpg" alt="jQuery" width="100" height="140">
<p> Klik tombol untuk memasukkan teks setelah gambar. </p>
<button onclick="afterText()">Insert after</button>
</body>
</html>
