• Lihat Daftar Paket Kursus Aplikasi Berbasis Website KLIK TOMBOL INI

  • Blog

  • Fungsi append() Di Jquery

    • Sabtu, 20 Januari 2018 19:05:26
    • Author : Brian Abraham
    10311
    1

    Halo guys, pada kesempatan kali ini Jasa Pembuatan Website punya sedikit tips dan trik mengenai fungsi append() di Jquery. Perlu kalian ketahui sebelumnya, append() adalah salah satu fungsi Jquery yang berfungsi untuk menambahkan sebuah elemen baru tanpa harus menyertakan element tersebut di tag HTML. Cara kerja dari fungsi append() adalah dimana ketika website kalian diakses maka akan menambahkan element baru pada html melalui fungsi tersebut. Fungsi tersebut hampir sama dengan method HTML DOM createElement(), apabila kalian belum mengetahui apa itu HTML DOM, berikut penjelasannya DOM atau Document Object Model merupakan object model standar HTML atau XML yang bersifat independent platform. Pada web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Akantetapi DOM diperlukan oleh JavaScript yang akan mengubah tampilan website secara dinamis. Dan Dengan kata lain, DOM adalah salah satu cara JavaScript untuk melihat suatu halaman HTML.

    Seperti W3C mulai mengembangkan DOM pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkatan. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya. Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web. Dari method createElement() tersebut tidak jauh berbeda dengan fungsi pada judul topik yang saya jelaskan disini, hanya saja untuk penggunaan fungsi tersebut lebih simple jika dibandingkan dengan menggunakan method createElement(). Untuk prakteknya bisa ikuti contoh yang saya berikan di bawah ini.

    Berikut Tahapannya

    • Kalian buat terlebih dahulu satu buah file dengan nama index.html, jika sudah ketikan contoh kode seperti berikut :
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Fungsi .append() Di Jquery</title>
</head>
<style>
#konten{width: 80%; margin:auto; padding: 15px; font-size: 24px;}

</style>
<body>
<div id="konten">
<div id="center">
   <div id="isi">Ketikan pesan chat ke kotak di bawah ini..</div>
   
</div>

<div id="form">
<form method="post" action="" id="form">
<input type="text" name="chat" id="chat"><input type="submit" name="submit" id="submit" value="Kirim">
</form>


<div id="konten"></div>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="handle.js"></script>
    • Jika sudah save file index.html tersebut
    • Buat lagi satu file dengan nama handle.js sejajar dengan file index.html, dan ketikan kode seperti berikut
    $("#submit").click(function(anu){
   anu.preventDefault();
   var obrol = $("#chat").val();
$("#center").append("<div id='isi'>"+obrol+"</div>").children(':last').hide().fadeIn(1000);
   
  var objDiv = document.getElementById("center");
  objDiv.scrollTop = objDiv.scrollHeight;   

$("form#Form")[0].reset();
     return false;
});
    • Jika sudah save file handle.js tersebut dan lihat hasilnya di browser
    Seperti yang terlihat pada hasil outputnya, jika kotak text di isi dan di klik tombol Kirim, maka akan menambahkan element paragraf baru beserta dengan text yang di input.

    Sampai disini tips dan trik yang Jasa Pembuatan Website jelaskan mengenai cara fungsi append() di Jquery, jangan sungkan untuk berkomentar di kotak komentar yang saya sediakan di bawah ini.



    - Apakah kalian sedang bingung mencari tempat khursus website terbaik di area jakarta, bogor, depok,
      tangerang dan bekasi ?
    - Apakah kalian seorang mahasiswa yang ingin menjadi Programmer Web Professional ?
    - Apakah kalian seorang karyawan diperusahaan yang ingin upgrade skill ke bidang Applikasi Web ?

    Kunjungi link dibawah ini :
    Tempat Khursus Website Terbaik Di Dumet School

    ~ Happy Coding Guys ~

    Average rating 3.6 of 7 vote

  • KOMENTAR

  • Reply
    • fsfsf
      fsfsf Senin, 15 Juli 2019 20:24:03

      scdbcdhbchdbcdhbchdbchdb

    Reply
    • ahmad saifur rohman
      ahmad saifur rohman Jumat, 11 Maret 2022 13:31:57

      😂😂😂😂😂😂

  • Kirim Komentar

    Untuk mengirim komentar, lengkapi formulir dibawah ini.