jQuery

Belajar jQuery Part 7 : Tutorial Menambahkan Element

Halo salam jumpa kembali di pertemuan yang ke-7 di sesi belajar jQuery. Pada pertemuan ini saya akan mengulas tentang Belajar Menambah Element dengan jQuery.

jQuery memiliki fungsi untuk menambahkan element baru pada html, beberapa fungsi jQuery yang dapat digunakan untuk menambahkan element diantaranya ialah :

  • after()
    Berfungsi untuk menambahkan element html, sesudah element yang dipilih.
  • before()
    Berfungsi untuk menambahkan element html, sebelum element yang dipilih.
  • prepend()
    Merupakan fungsi jQuery untuk menambahkan sebuah element html pada sisi dalam element yang dipilih, tetapi hanya diawal isi element tersebut.
  • append()
    Merupakan fungsi jQuery untuk menambahkan sebuah element html pada sisi dalam element yang dipilih, tetapi hanya akhir isi element tersebut.

Nah dari penjelasan diatas pasti teman – teman bingung, pengertian dari fungsi jQuery yang digunakan untuk menambahkan element.

Sebaiknya langsung kita contohkan saja, mohon dipahami untuk kali ini kita akan belajar cara menambahkan element dengan fungsi after, before, prepend dan append.

Baca: Mendapatkan Nilai dan Value pada jQuery

Disini saya sudah menulis contoh kode programnya, tinggal tulis ulang di text editor masing – masing.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part 7 : Cara Menambahkan Element dengan JQuery</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Add Function JQuery | www.irvannurfazri.com</h1>		
	<div class="kotak">
		<span>ISI KOTAK</span>
	</div>
	
	<button class="after">Test After</button>
	<button class="before">Test Before</button>
	<button class="append">Test Append</button>
	<button class="prepend">Test Prepend</button>
</body>
<script type="text/javascript">
	$(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;
}

h1{
	text-align: center;
}

.kotak{
	width: 300px;
	height: auto;
	background: blue;
	padding: 30px;
	color: #fff;
	margin-bottom: 20px;
}

.kotak span{
	background: gray;
	padding: 10px;
}

button{
	color: #fff;
	background: #232323;
	border: none;
	padding: 10px;
}

Hasilnya..

Belajar jQuery Cara Menambahkan element - #IRVANGEN
Belajar jQuery Cara Menambahkan element – #IRVANGEN

Teman – teman perhatikan kembali pada kode program diatas, kita telah membuat sebuah fungsi yang dapat menambahkan element dengan jQuery, fungsi yang digunakan adalah, after, before, prepend dan append.

$('.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>")
});

Masing – masing tombol memiliki fungsinya, jika diklik akan berfungsi sesuai dengan apa yang sudah dijelaskan sebelumnya.

Bagaimana mudah bukan? Saya harap teman – teman paham.


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini, tentang Cara Menambahkan Element Dengan jQuery. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terimakasih.

Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.id Instagram : ig.com/irvan_gen Profile

Leave a Reply

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