Memanipulasi isi dari element DOM dengan jQuery

Terdapat 6 metode yang digunakan untuk memanipulasi isi dari DOM, yaitu:

  • .html()
  • .html(html)
  • .text()
  • .text(text)
  • .val()
  • .val(value)

.html()

Mendapatkan isi HTML dari elemen DOM.

Jadi jika elemen tersebut mempunyai class yang sama maka metode ini akan mengambil elemen yang pertama saja.

Syntax:

$(‘selector’).html();

Contoh:

Buatlah satu file HTML bernama dom.html dengan isi seperti dibawah ini:

<head>
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
var hasil= $(‘div.atas’).html();
alert(hasil);
});
</script>
<div class=“atas”>
<div class=”isiPertama”>Selamat datang di a2fahmi.com
</div>
<p>a2fahmi.com menyediakan private PHP & MySQL</p>
</div>
Keterangan:
  • $(‘div.atas’).html(), kode berarti jQuery akan mencari elemen div yang mempunyai class “atas”.

Hasil:

Muncul Pertanyaan:

pernyaataan “Jadi jika elemen tersebut mempunyai class yang sama maka metode ini akan mengambil elemen yang pertama saja”, bisa diberikan contohnya … ?

Jawaban:

<head>

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
var hasil= $(‘div.atas’).html();
alert(hasil);
});
</script>
<div class=“atas”>
<div class=”isiPertama”>Selamat datang di a2fahmi.com
</div>
<p>a2fahmi.com menyediakan private PHP & MySQL</p>
</div>
<div class=“atas”>
<p>Tulisan ini tidak ditampilkan </p>

</div>

Keterangan:

  • Coba sekarang kamu jalankan melalui browser dan lihat bahwa div dengan class atas yang kedua tidak ditampilkan, jadi yang ditampilkan hanya div yang pertama.

.html(HTML)

Mengganti isi dari  setiap elemen yang sesuai dengan html.

Syntax:

$(‘selector’).html(HTML);

Contoh:

Buatlah file HTML bernama dom.html dengan isi seperti dibawah ini:

<head>

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘div.atas‘).html(‘<b>Lagi belajar jQuery</b>’);

});

</script>

<div class=“atas”>

<div class=”isiPertama”>Selamat datang di a2fahmi.com</div>

<p>a2fahmi.com menyediakan private PHP & MySQL</p>

</div>

Keterangan:

$(‘div.atas‘).html(‘<b>Lagi belajar jQuery</b>’), kode ini berarti JQuery mencari elemen div yang mempunyai class =’atas’ lalu mengganti isinya dengan ‘<b>Lagi belajar jQuery</b>’

Hasil:

Jalankan file dom.html-mu lalu lihat browsermu menampilkan kata “Lagi belajar jQuery”

.text()

Digunakan untuk mendapatkan string dari elemen DOM.

Syntax:

$(‘selector’).text()

Contoh:

Buatlah satu file HTML yaitu dom.html dengan isi seperti dibawah ini:

<head>

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

var hasil=$(‘div.atas’).text();

alert(hasil);

});

</script>

<div class=”atas”>

<div class=”isiPertama”>Selamat datang di a2fahmi.com

</div>

<p>a2fahmi.com menyediakan private PHP & MySQL</p>

</div>

Keterangan:

$(‘div.atas’).text(), kode ini berarti jQuery mencari elemen div yang mempunyai class ‘atas’, lalu jQuery mengambil isi dari elemen div tersebut, dimana yang diambil hanya yang berupa string saja bukan tag html.

Hasil:

.text(text)

Mengganti isi dari  setiap elemen yang sesuai dengan teks.

Syntax:

$(‘selector’).text(text)

Contoh:

Buatlah satu file HTML bernama dom.html dan isi dengan kode berikut ini:

<head>

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘div.atas’).text(‘<b>Lagi Belajar jQuery</b>’);

});

</script>

<div class=”atas”>

<div class=”isiPertama”>

Selamat datang di a2fahmi.com

</div>

<p>

a2fahmi.com menyediakan private PHP & MySQL

</p>

</div>

Hasil:

Jalankan file dom.html maka akan menghasilkan teks ‘<b>Lagi Belajar jQuery</b>

.val()

Digunakan untuk mengambil value dari satu elemen DOM.

Biasanya digunakan untuk mengambil nilai dari elemen form.

Syntax:

$(‘selector’).val()

Contoh:

Buatlah satu file html bernama val.html dan isi dengan kode dibawah ini:

<head>

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

var namaOrang=$(‘#nama‘).val();

alert(namaOrang);

});

</script>

<input type=”text” name=”nama” id=”nama” value=“Fahmi Basya Kartapura”>

Keterangan:

  • $(‘#nama‘).val(), kode ini digunakan untuk mengambil nilai dari elemen form yang mempunyai id =‘nama’.
  • alert(namaOrang), kode ini menampilkan pop-up yang berisi value dari elemen form.

Hasil:

Jalankan file val.html maka akan menghasilkan pop-up yang berisi tulisan “Fahmi Basya Kartapura”.

.val(value)

Digunakan untuk memberikan nilai pada setiap elemen DOM.

Jika elemen tersebut sudah mempunyai nilai maka fungsi ini akan menggantinya dengan nilai yang baru.

Syntax:

$(‘selector’).val(value)

Contoh:

Buatlah sebuah file HTML bernama beriNilai.html dengan isi seperti berikut ini:

<head>

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘#nama’).val(“Muhammad Arsy”);

});

</script>

<input type=”text” name=”nama” id=”nama” value=”Fahmi Basya Kartapura”>

Keterangan:

(‘#nama’).val(“Muhammad Arsy”), Kode ini akan mengganti nilai dari elemen form yang mempunyai id=”‘nama” dengan nilai “Muhammad Arsy”.

Hasil:

Jalankan file beriNilai.html dan lihat hasilnya bahwa isi dari elemen text adalah tulisan “Muhammad Arsy” seperti terlihat dibawah ini:

Jika tutorial ini bermanfaat silahkan katakan “Terima Kasih Fahmi Basya Kartapura”.



You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *