Javascript

jQuery HTML: Contoh dan Cara Menggunakannya

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>

Catur Kurnia Sari

Share
Tags: javascript