JQuery HTML

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!