Digitalmapia adalah situs dimana semua orang bisa menulis artikelnya sendiri. Klik "Login/Register untuk masuk, lalu klik "Tulis Artikel" untuk mulai menulis.

Seri belajar JQuery(5) : Menggunakan append, prepend, before dan after untuk menambahkan konten pada HTML

Kali ini kita akan belajar mengenai append, prepend, before dan after. Fungsi-fungsi tersebut digunakan untuk menambahkan konten, baik berupa tulisan maupun elemen html. Konten tersebut ditambahkan sesudah atau sebelum element yang sudah ada.

Append dan Prepend pada JQuery

Fungsi append digunakan untuk menambahkan konten sesudah konten tertentu. Perhatikan contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>

	<p>Ini adalah sebuah element</p>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
	$('p').append('<h1>Hello dari dalam jquery!!</h1>');
	</script>
</body>
</html>

Pada contoh diatas, kita menambahkan tulisan ‘Hello dari dalam jquery!!’ dengan menggunakan fungsi append. Fungsi append, digunakan untuk menambahkan konten sesudah konten tertentu. Pada contoh diatas, konten ditambahkan setelah element p. Selain menambahkan konten sesudah element p, kita juga bisa menambahkan konten sebelum element tersebut, yaitu dengan menggunakan fungsi prepend. Contoh dibawah ini hampir sama persis dengan contoh sebelumnya, hanya append diganti menjadi prepend:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>

	<p>Ini adalah sebuah element</p>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
	$('p').prepend('<h1>Hello dari dalam jquery dengan prepend!!</h1>');
	</script>
</body>
</html>

Jika anda jalankan kedua contoh diatas, maka akan terlihat bedanya. Pada contoh kedua, konten akan muncul sebelum tulisan yang berada di dalam element p.

Menggunakan Before dan After

Selain menggunakan append dan prepend, kita juga bisa menggunakan fungsi before dan after. Fungsinya, bisa dikatakan ‘sama saja’ dengan append dan prepend, yaitu menambahkan konten sebelum dan sesudah element tertentu. Fungsi before dan after, selain dikenal pada JQuery, pada CSS-pun terdapat fungsi ini. Perhatikan contoh berikut:

::Menggunakan fungsi after

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>

	<p>Ini adalah sebuah element</p>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
	$('p').after('<h1>Hello</h1>');
	</script>
</body>
</html>

::Menggunakan fungsi before

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>

	<p>Ini adalah sebuah element</p>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
	$('p').before('<h1>Hello</h1>');
	</script>
</body>
</html>

Menambahkan konten ditengah-tengah element

Sekarang bagaimana jika kita mempunyai dua buah paragraf sebagai berikut:

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam blanditiis eaque incidunt at nobis impedit voluptatem voluptates fugit repudiandae labore, quia, suscipit repellat deleniti natus doloremque laudantium adipisci rem. Minima.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non iste cum illo necessitatibus magni quos voluptas? Ullam eum commodi vitae est sequi atque dignissimos architecto. Distinctio quos atque illo ad.</p>

Kemudian, kita ingin menambahkan konten diantara kedua paragraf tersebut. Untuk itu, kita akan ambil paragraf yang pertama, kemudian tambahkan konten dengan menggunakan after setelah paragraf pertama tersebut. Perhatikan contoh berikut:

$('p').first().after('<h1>Hello</h1>');

Mudah bukan? Diatas kita menggunakan fungsi first untuk men-seleksi paragraf yang pertama. Semoga bermanfaat.

Belajar JQuery
  • Shara Citra

    Beritanya bagus ue..
    Yang mau dapat kaos gratis, gabung di sini y :
    http://mcpromo.net/