JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JQuery HTML
JQuery vs JavaScript
jQuery was created in 2006 by John Resig. It was designed with an aim to handle Browser Incompatibilities and simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax.
After the JavaScript Version 5 (2009), most of the jQuery utilities can be solved with a few lines of standard JavaScript:
Finding HTML Element by Id
Return the element with id=”id01″:
JQuery
Example
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
</head>
<body>
<h2>Setting Text Content</h2>
<p id=”01″>Hello World!</p>
<p id=”02″>Hello Sweden!</p>
<script>
$(document).ready(function() {
var myElement = $(“#01”);
myElement.text(“Hello Sweden!”);
});
</script>
</body>
</html>
Output
Setting Text Content
Hello World!
Hello Sweden!
JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>Setting Text Content</h2>
<p id=”01″>Hello World!</p>
<p id=”02″>Hello Sweden!</p>
<script>
const myElement = document.getElementById(“01”);
myElement.textContent = “Hello Sweden!”;
</script>
</body>
</html>
Output
Setting Text Content
Hello World!
Hello Sweden!
Get Text Content
Get the inner text of an HTML element.
jQuery
Example
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
</head>
<body>
<h2>Get Text Content</h2>
<p id=”01″>Hello World!</p>
<p id=”02″>Hello Sweden!</p>
<p id=”03″>Hello Japan!</p>
<p id=”demo”></p>
<script>
$(document).ready(function() {
var myText = $(“#02”).text();
$(“#demo”).text(myText);
});
</script>
</body>
</html>
Output
Get Text Content
Hello World!
Hello Sweden!
Hello Japan!
Hello Sweden!/p>
Set HTML Content
Set the HTML content of an element:
jQuery
Example
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
</head>
<body>
<h2>Set HTML</h2>
<div id=”01″><p>Hello World!</p></div>
<div id=”02″><p>Hello Sweden!</p></div>
<p id=”demo”></p>
<script>
$(document).ready(function() {
$(“#02”).html(“<p>Hello World!</p>”);
});
</script>
</body>
</html>
Output
Set HTML
Hello World!
Hello World!
Javascript
Example
<!DOCTYPE html>
<html>
<body>
<h2>Set HTML</h2>
<div id=”01″><p>Hello World!</p></div>
<div id=”02″><p>Hello Sweden!</p></div>
<p id=”demo”></p>
<script>
document.getElementById(“02”).innerHTML = “<p>Hello World!</p>”;
</script>
</body>
</html>
Output
Set HTML
Hello World!
Hello World!
Get HTML Content
Get the HTML content of an element.
jQuery
Example
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
</head>
<body>
<h2>Set HTML</h2>
<div id=”01″><p>Hello World!</p></div>
<div id=”02″><p>Hello Sweden!</p></div>
<script>
$(document).ready(function() {
var content = $(“#02”).html();
$(“#01”).html(content);
});
</script>
</body>
</html>
Output
Hello Sweden!
Hello Sweden!
JavaScript
Example
<!DOCTYPE html>
<html>
<body>
<h2>Setting HTML</h2>
<div id=”01″><p>Hello World!</p></div>
<div id=”02″><p>Hello Sweden!</p></div>
<script>
const content = document.getElementById(“02”).innerHTML;
document.getElementById(“01”).innerHTML = content;
</script>
</body>
</html>
Output
Hello Sweden!
Hello Sweden!