Section Artikel
jQuery vs JavaScript
jQuery dibuat pada tahun 2006 oleh John Resig. Ini dirancang untuk menangani Ketidaksesuaian Browser dan untuk menyederhanakan Manipulasi DOM HTML, Event Handler, Animasi, dan AJAX.
Selama lebih dari 10 tahun, jQuery telah menjadi pustaka JavaScript paling populer di dunia.
Namun, setelah JavaScript Versi 5 (2009), sebagian besar utilitas jQuery dapat diselesaikan dengan beberapa baris JavaScript standar:
Mengatur Konten Teks
Mengatur teks inner dari elemen HTML:
JQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1>Mengatur Konten Teks</h1> <h2 id="01">Hello World!</h2> <h2 id="02">Hello Sweden!</h2> <script> $(document).ready(function() { var myElement = $("#01"); myElement.text("Hello Sweden!"); }); </script> </body> </html>
JavaScript
<!DOCTYPE html>
<html>
<body>
<h1>Mengatur Konten Teks</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello Sweden!</h2>
<script>
var myElement = document.getElementById("01");
myElement.textContent = "Hello Sweden!";
</script>
</body>
</html>
Mendapatkan Konten Teks
Dapatkan teks inner dari elemen HTML:
JQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>Mendapatkan Konten Teks</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello Sweden!</h2>
<h2 id="03">Hello Japan!</h2>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElement = $("#02");
var myText = myElement.text();
$("#demo").text(myText);
});
</script>
</body>
</html>
JavaScript
<!DOCTYPE html>
<html>
<body>
<h1>Mendapatkan Konten Teks</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello Sweden!</h2>
<h2 id="03">Hello Japan!</h2>
<p id="demo"></p>
<script>
var myElement = document.getElementById("02");
var myText = myElement.textContent || myElement.innerText;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html>
Mengatur Konten HTML
Mengatur konten HTML dari sebuah elemen:
JQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1>Setting HTML</h1> <div id="01"> <h2 >Hello World!</h2> </div> <div id="02"> <h2 >Hello Sweden!</h2> </div> <p id="demo"></p> <script> $(document).ready(function() { var myElement = $("#02"); myElement.html("<p>Hello World!</p>"); }); </script> </body> </html>
JavaScript
<!DOCTYPE html>
<html>
<body>
<h1>Setting HTML</h1>
<div id="01">
<h2 >Hello World!</h2>
</div>
<div id="02">
<h2 >Hello Sweden!</h2>
</div>
<p id="demo"></p>
<script>
var myElement = document.getElementById("02");
myElement.innerHTML = "<p>Hello World!</p>";
</script>
</body>
</html>
Mendapatkan Konten HTML
Dapatkan konten HTML dari sebuah elemen:
JQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>Setting HTML</h1>
<div id="01">
<h2 >Hello World!</h2>
</div>
<div id="02">
<h2 >Hello Sweden!</h2>
</div>
<script>
$(document).ready(function() {
var content = $("#02").html();
$("#01").html(content);
});
</script>
</body>
</html>
JavaScript
<!DOCTYPE html>
<html>
<body>
<h1>Setting HTML</h1>
<div id="01">
<h2 >Hello World!</h2>
</div>
<div id="02">
<h2 >Hello Sweden!</h2>
</div>
<script>
var content = document.getElementById("02").innerHTML;
document.getElementById("01").innerHTML = content;
</script>
</body>
</html>
