Cara Kerja append(''); prepend(''); before(''); after(''); html(''); pada jQuery

Anda mungkin sempat bingung dan bertanya-tanya, apa perbedaan antara .append(""); .prepend(""); .before(""); .after(""); dan .html("");.

Nah langsung saja, kode ini sering dipakai dalam jQuery, maksud dari kelimanya adalah:
  • Append = Menambahkan sebuah record didalam tag bagian bawah.
  • Prepend = Menambahkan sebuah record didalam tag bagian atas.
  • Before = Menambahkan sebuah record diluar tag bagian atas.
  • After = Menambahkan sebuah record diluar tag bagian bawah.
  • HTML = Mengisi sebuah record didalam tag penuh.

Contoh cara kerja append:
<div class="contohAppend">
Hai manusia..
</div>
<script>
$('.contohAppend').append('<u>TES</u>');
</script>
Hasil:
<div class="contohAppend">
Hai manusia..
<u>TES</u>
</div>

Contoh cara kerja prepend:
<div class="contohPrepend">
Hai manusia..
</div>
<script>
$('.contohPrepend').prepend('<u>TES</u>');
</script>
Hasil:
<div class="contohPrepend">
<u>TES</u>
Hai manusia..
</div>

Contoh cara kerja before:
<div class="contohBefore">
Hai manusia..
</div>
<script>
$('.contohBefore').before('<u>TES</u>');
</script>
Hasil:
<u>TES</u>
<div class="contohBefore">
Hai manusia..
</div>

Contoh cara kerja after:
<div class="contohAfter">
Hai manusia..
</div>
<script>
$('.contohAfter').after('<u>TES</u>');
</script>
Hasil:
<div class="contohAfter">
Hai manusia..
</div>
<u>TES</u>

Contoh cara kerja html:
<div class="contohHtml">
Hai manusia..
</div>
<script>
$('.contohHtml').html('<u>TES</u>');
</script>
Hasil:
<div class="contohHtml">
<u>TES</u>
</div>

Dari contoh ini apakah sudah paham? perlukah penjelasannya juga?

Saya menggunakan Class pada semua contoh diatas, sehingga pada jQuery menggunakan tanda titik (.). Jika menggunakan ID, maka diganti dengan tanda pagar (#).

Selain itu, jika Anda tidak mendefinisikan ke khusus, katakanlah langsung didalam tag div, Anda bisa memakai $('div').html('<u>TES</u>');
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini