Memahami jQuery HTML append dan prepend
jQuery mendukung modifikasi elemen HTML secara cepat, Misalnya Menambah elemen HTML
jQuery mendukung modifikasi elemen HTML secara cepat, misalnya
Sintaks jQuery yang dapat dimanfaatkan untuk memodifikasi html antara lain
jQuery & Ajax
jQuery mendukung fungsi-fungsi ajax, untuk mengubah isi halaman web tanpa reloading secara keseluruhan.
Latihan
latihan ini mendemokan cara untuk menambahkan elemen html baru melalui fungsi append()
fungsi append() dapat digantikan oleh prepend() sesuai keperluan dengan cara, HTML lain dapat ditambahkan kedalam halaman web.
Sourcode
- Menambah elemen HTML
- Menghapus elemen HTML
- Mengubah isi elemen HTML
- append(); untuk menambahkan isi bagaian akhir elemen suatu elemen HTML.
- prepend(); untuk menambahkan isi bagaian awal elemen suatu elemen HTML.
jQuery & Ajax
jQuery mendukung fungsi-fungsi ajax, untuk mengubah isi halaman web tanpa reloading secara keseluruhan.
Latihan
latihan ini mendemokan cara untuk menambahkan elemen html baru melalui fungsi append()
fungsi append() dapat digantikan oleh prepend() sesuai keperluan dengan cara, HTML lain dapat ditambahkan kedalam halaman web.
Sourcode
<!-- apradiz: P17-1.html -->
<html>
<head>
<title>P17-1:Modifikasi HTML</title>
<script type="text/javascript" src="http://yourjavascript.com/18412518226/jquery-1-8-2-min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Teks tambahan</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWeu5z-Qa4UNe2o3zsWQ6sfA4j85WN_KuWMpJZSmjLmX_DZD6TQAfYMYttgwyoOHaxFgapVlD_MSiE5aFf3hRPemEv2qTkL5G9JQtbePQb-iJR2j3C6Yg7sSA6Hok5a06_d_g1GzVHqSo/s1600/logo.png'></img></li>.");
});
});
</script>
</head>
<body>
<p>Ujivoba jQuery HTML.</p>
<p>Ujivoba jQuery versi 1.8.2.</p>
<ol>
<li>Poin 1</li>
<li>Poin 2</li>
<li>Poin 3</li>
</ol>
<button id="btn1">Tambah Teks</button>
<button id="btn2">Tambah Image</button>
</body>
</html>
2 comments