Cara menggunakan MYELEMENT pada JavaScript

JQuery - JQuery Dasar

Table of Contents Show

Belajar JQuery Menambah Element Dengan JQuery
Di dalam elemen HTML manakah kita meletakkan JavaScript?
Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?
Bagaimana cara membuat fungsi di JavaScript?
Apa itu Get Element by id?

By
4 January 2016
JQuery JQuery Dasar

Belajar JQuery Menambah Element Dengan JQuery

JQuery memiliki fungsi untuk menambahkan element baru pada element HTML, bisa itu menambahkan element sebelum element, sesudah element, sebelum element yang ada di dalam nya atau sesudah element yang ada di dalamnya. adapun beberapa fungsi jquery yang bisa di gunakan untuk menambah element dengan jquery adalah:

after()
merupakan fungsi jquery untuk menambahkan element html pada sesudah element yang di pilih.
before()
merupakan fungsi jquery untuk menambahkan element html pada sebelum element yang di pilih.
prepend()
merupakan fungsi jquery untuk menambahkan element html pada sisi dalam element yang di pilih tapi di awal isi element tersebut.
append()
merupakan fungsi jquery untuk menambahkan element html pada sisi dalam element yang di pilih tapi di akhir isi dari element tersebut.

Pasti anda bingung dengan penjelasan pengertian dari fungsi-fungsi jquery di atas yang di gunakan untuk menambahkan element. alangkah lebih baiknya akan di jelaskan satu persatu dengan di sisipkan masing-masing contoh agar lebih mudah di pahami. untuk contoh dari penggunaan fungsi after, before, append dan prepend akan di gabungkan pada satu contoh agar lebih mudah di pelajari dan di rasakan apa-apasaja perbedaan dari masing-masing fungsi jquery tersebut.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part9:MenambahElement denganJQuery</title>

</head>

<body>

<h2>Add Function JQuery|www.malasngoding.com</h2>

<span>ISI KOTAK</span>

</div>

<button class="after">Tes after</button>

<button class="before">Tes before</button>

<button class="append">Tes append</button>

<button class="prepend">Tesprepend</button>

</body>

$(document).ready(function(){

$('.after').click(function(){

$('.kotak').after("<h4>contoh after</h4>")

});

$('.before').click(function(){

$('.kotak').before("<h4>contoh before</h4>")

});

$('.append').click(function(){

$('.kotak').append("<h4>contoh append</h4>")

});

$('.prepend').click(function(){

$('.kotak').prepend("<h4>contoh prepend</h4>")

});

</script>

</html>

style.css

body{

font-family:sans-serif;

}

h2{

text-align:center;

}

.kotak{

width:300px;

height:auto;

background: orange;

padding:30px;

color:#fff;

margin-bottom:20px;

}

.kotak span{

background:red;

padding:10px;

}

button{

color:#fff;

background:#232323;

border:none;

padding:10px;

}

menambah element dengan jquery

dapat di perhatikan pada contoh di atas. terdapat empat buah tombol yang sudah kita beri tanda masing-masing dengan nama after, before, append dan prepend. tujuan dari masing-masing tombol yang saya buat sebagai contoh ini adalah untuk menambahkan element yang dapat juga perhatikan pada syntax jquery berikut. Belajar JQuery Menambah Element Dengan Jquery

$('.after').click(function(){

$('.kotak').after("<h4>contoh after</h4>")

});

$('.before').click(function(){

$('.kotak').before("<h4>contoh before</h4>")

});

$('.append').click(function(){

$('.kotak').append("<h4>contoh append</h4>")

});

$('.prepend').click(function(){

$('.kotak').prepend("<h4>contoh prepend</h4>")

});

jika tombol after di klik maka element “<h4>contoh after</h4>” akan di tambahkann pada sesudah element kotak seperti pada gambar yang hasil eksekusi di atas. dan jika yang di klik tombol before maka element “<h4>contoh before</h4>” akan muncul pada sebelum element kotak. jika tombol append di klik maka element “<h4>contoh append</h4>” akan di munculkan di dalam kotak tapi pada posisi awal dari semua isi pada element kotak. jika tombol prepend di klik maka element “<h4>contoh prepend</h4>” akan di munculkan atau di tambahkan di dalam element class kotak tetapi pada terletak pada akhir semua element yang terdapat di dalam element kotak.

Belajar JQuery Menambah Element Dengan JQuery

sesuai dengan masing-masing contoh lokasi seperti pada gambar di atas. dan untuk lebih jelasnya lagi dilahkan pelajari pada contoh berikut ini.

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

terima kasih sudah membaca tutorial Belajar JQuery Menambah Element Dengan Jquery selanjutnya pada tutorial belajar jquery selanjutnya akan di jelaskan tentang menambahkan css dengann JQuery pada Belajar JQuery Part 10.

Incoming search terms:

contoh program jQuery
menambahkan div kedalam elemen div deng jQuery
add jquery di tag html
add method Jquery indo penjelasan
belajar insert after di jquery
buuton
cara add form jquery
cara menambahkan href di html jquery
cara nambah hquery
cara tambah field dengan javascript lanjutan

Tags: cara Menambah Element Dengan Jquery, cara menulis syntax jquery yang benar, contoh after jquery, contoh append jquery, contoh before jquery, contoh prepend jquery, menambah element jquery, menambahkan element html sebelum element dengan jquery, menambahkan element html sesudah element dengan jquery, menulis html dengan jquery, menyisipkan html dengan jquery, pengertian after pada jquery, pengertian append di html, pengertian before pada jquery, pengertian prepend pada jquery, tutorial jquery dasar

Di dalam elemen HTML manakah kita meletakkan JavaScript?

Pada dasarnya, kita bebas ingin meletakkan kode JavaScript di bagian mana saja, selama berada di dalam tag <script>.

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Cara membuat JavaScript di HTML secara langsung Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head>

Bagaimana cara membuat fungsi di JavaScript?

Berikut ini contoh cara membuat function di javascript dalam bentu pseudo-code..

function namaFungsi(parameter1, parameter2) { // Kode yang ingin dieksekusi } ... .

<html> <head> <script type="text/javascript"> function hitung(p1, p2) { return p1+p2; } console.log(hitung(5,5)); </script> </head> </html>.

Apa itu Get Element by id?

Method getElementById() digunakan untuk mendapatkan elemen tunggal dengan id-nya. Mari kita lihat sebuah contoh: var title = document.getElementById('header-title'); Di sini kita mendapatkan elemen dengan id header-title dan menyimpannya ke dalam variabel.