Memahami jQuery HTML append dan prepend

jQuery mendukung modifikasi elemen HTML secara cepat, misalnya

Menambah elemen HTML
Menghapus elemen HTML
Mengubah isi elemen HTML

Sintaks jQuery yang dapat dimanfaatkan untuk memodifikasi html antara lain

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.

Demo

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>

Memahami jQuery HTML append dan prepend

Apradiz Renfaan

2 Comment

Memahami jQuery HTML append dan prepend

Apradiz Renfaan

comment 2 Comment

2 Comment