Program jQuery Get Content

Hello guys! jQuery merupakan salah satu Library JavaScript yang cukup populer. Kali ini, kita akan membuat Program JavaScript jQuery Get Content.

Sumber : Tutorialsteacher.comTutorialspoint.com, dan W3schools.com

Untuk Software-nya, Anda bisa menggunakan Notepad++, Sublime Text, ataupun VS Code, dan ditampilkan melalui Browser Anda. Bahkan Anda juga bisa menggunakan Online Compiler yang ada di Internet seperti ProgramizOneCompilerOnlineGDB, dll.


Sebagai contoh, document.getElementById() dalam JavaScript akan mengembalikan objek DOM, sedangkan $('#id') akan mengembalikan objek jQuery. Gambar berikut mengilustrasikan perbedaannya.

jQuery menyediakan sejumlah metode untuk memanipulasi DOM secara efisien. Anda tidak perlu menulis kode yang besar dan kompleks untuk mengatur atau mengambil konten dari elemen HTML apa pun.


jQuery menyediakan metode html() dan text() untuk mengekstrak konten elemen HTML yang cocok. Berikut adalah Sintaks dari kedua metode ini :

$(selector).html();

$(selector).text();

Metode text() jQuery mengembalikan nilai teks biasa dari konten, sedangkan html() mengembalikan konten dengan tag HTML. Anda perlu menggunakan pemilih jQuery untuk memilih elemen target.

Contoh :

Berikut adalah contoh bagaimana cara mendapatkan konten dengan metode text() dan html() jQuery :

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("#text").click(function(){
         alert($("p").text());
      });
      $("#html").click(function(){
         alert($("p").html());
      });
   });
</script>
</head>
<body>
   <p>Lorem ipsum <b>dolor sit amet,</b>  consectetur adipisicing elit, <b>sed do eiusmod tempor.</b></p>
   
   <button id="text">Get Text</button>
   <button id="html">Get HTML</button>
</body>
</html>

Output :


Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)

Post a Comment

Previous Post Next Post