Belajar JQuery Part 8 : Menetapkan Nilai dan Value dengan JQuery

Menetapkan Nilai dan Value dengan JQuery

Menetapkan Nilai dan Value dengan JQuery. Pada tutorial sebelumnya sudah di jelaskan tentang cara mendapatkan nilai dan value dari elemant HTML dengan menggunakan JQuery. klik di sini untuk membaca tutorial sebelumnya tentang cara mendapatkan nilai dan value dari element HTML dengan menggunakan fungsi .text(), .html(), .val() pada JQuery. Pada tutorial menetapkan nilai dan value dengan JQuery akan di jelaskan bagaimana cara mengisi nilai dan value pada element HTML dengan menggunakan fungsi-fugsi yang sama seperti penjelasan pada tutorial belajar jquery pada part sebelumnya yaitu fungsi .text(), .html() dan fungsi .val().

fungsi .text(), .html() dan .val() juga memiliki kegunaan untuk mengisi suatu nilai atau value pada element HTML selain kemampuannya dalam mendapatkan nilai dan value dari element HTML. cara menambahkan atau menetapkan nilai dan value pada element HTML sangat mudah. anda hanya perlu memasukkan nilai atau element yang ingin anda tambahkan di dalam parameter masing-masing fungsi yang sudah saya sebutkan di atas.

Cara menetapkan konten dengan fungsi .text() di jquery

untuk cara menetapkan konten pada element html dengan menggunakan fungsi text() silahkan perhatikan contoh dan penjelasan berikut ini.

style.css

menetapkan nilai dan value dengan jquery

perhatikan pada contoh di atas. text “belajar pemrograman web di www.malasngoding.com” pada element paragraf setelah tombol di klik. karena pada event klik tombol saya menambahkan text tersebut pada element class nama.

sehingga text “belajar pemrogaman web di www.malasngoding.com” akan di tambahkan pada element class nama.

See the Pen eJgKbO by Malas Ngoding (@malasngoding) on CodePen.0

Cara menambahkan element HTML dengan fungsi .HTML() di jquery

Cara menambahkan element HTML dengan fungsi .html() di jquery juga sama seperti contoh cara penggunaan fungsi text(). perbedaannya adalah .text() hanya mampu menambahkan text dan bukan yang berbentuk element html. tetapi fungsi .html() mampu menambahkan element html. element HTML yang ingin di tambahkan hanya perlu di letakkan atau di isi di dalam parameter fungsi .html()

contoh cara penggunaan dan penulisan fungsi .html() di jquery caranya sangat mudah. silahkan perhatikan pada contoh dan penjelasan fungsi .html() jquery berikut ini.

index.html

style.css

menambahkan element html dengan jquery

Perhatikan pada contoh di atas. pada saat tombol di klik kita menambahkan element html

sehingga muncul element kotak yang class nya sudah kita setting dengan css menggunakan warna orange dan memiliki text putih. perlu sedikit di ingat bahwa fungsi .html() jquery ini mampu menambahkan element html. perhatikan contoh di bawah

See the Pen NxdzJO by Malas Ngoding (@malasngoding) on CodePen.0

Cara menambahkan value HTML dengan fungsi .HTML() di jquery

Cara penulisan dan penggunaannya masih sama dengan penggunaan fungsi text() dan html() pada jquery. hanya saja yang membedakan di sini ialah fungsi val() di gunakan untuk menetapkan nilai value pada element HTML. pada contoh ini kita akan menetapkan atau mengisi value pada sebuah form saat tombol si klik.

index.html

style.css

perhatikan pada syntax jquery di atas.

kita membuat intruksi bahwa ketika event klik terjadi pada tombol maka form yang memiliki class nama akan di isi dengan value “malas ngoding”. lihat pada contoh di bawah ini. untuk mencoba menetapkan value dengan val() silahan coba klik pada tombol pada contoh berikut.

See the Pen JGEZqR by Malas Ngoding (@malasngoding) on CodePen.0

dan jika anda ingin mengosongkan value pada sebuah form. maka anda bisa menetapkan value element tersebut dengan cara mengosongkan parameter fungsi val(). seperti contoh berikut.

jadi kesimpulan dari penjelasan tentang tutorial menetapkan isi dan value dengan jquery ini adlaha fungsi .text() jquery di gunakan untuk menetapkan html, html() digunakan untuk menetapkan menetapkan element yang berbentuk HTML, dan val() untuk menetapkan nilai value pada element HTML. sekian tutorial Menetapkan Nilai dan Value dengan JQuery