JavaScript / jQuery HTML Elements
jQuery vs JavaScript
In 2006, John Resig made jQuery to fix browser issues and make working with HTML easier. jQuery helps with managing HTML elements, handling events, creating animations, and using Ajax. You can learn more about it at the link: jQuery.
jQuery has been the most widely used JavaScript library globally for over 10 years.
But since JavaScript Version 5 (2009), you can accomplish many jQuery tasks using just a few lines of regular JavaScript code.
Set Text Content
Change the text inside an HTML element:
Get Text Content
Retrieve the text inside an HTML element:
Set HTML Content
Update the text inside an HTML element:
Get HTML Content
Retrieve the HTML content from an element:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/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>
<!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>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/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>
<!DOCTYPE html>
<html>
<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>
const myText = document.getElementById("02").textContent;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/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>
<!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>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/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>
<!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>
HTML
CSS
Javascript
Jquery