Overall HTML Document we can fetch, and modify the value of the element we select using jquery.
Here are some important methods used to fetch and modify a data.
There are many other methods which sets the styles values.
Using the methods we can fetch the values for the element we select.
Syntax $("h1").html();
EDUCATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Fetching and Setting Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="exampleElement">
<p>This is a sample element.</p>
<input type="text" id="textInput" value="Default Text">
<img id="image" src="default.jpg" alt="Default Image">
</div>
<script>
// Fetching examples
var htmlContent = $("#exampleElement").html();
var textContent = $("#exampleElement").text();
var inputValue = $("#textInput").val();
var imageUrl = $("#image").attr("src");
console.log("Fetched HTML Content:", htmlContent);
console.log("Fetched Text Content:", textContent);
console.log("Fetched Input Value:", inputValue);
console.log("Fetched Image URL:", imageUrl);
</script>
</body>
</html>
Using the methods we can modify the values for the element we select.
Syntax $("h1").html("Modified Data");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Fetching and Setting Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="exampleElement">
<p>This is a sample element.</p>
<input type="text" id="textInput" value="Default Text">
<img id="image" src="default.jpg" alt="Default Image">
</div>
<script>
// Setting examples
$("#exampleElement").html("<p>New HTML content</p>");
$("#exampleElement").text("New text content");
$("#textInput").val("New Input Value");
$("#image").attr("src", "newimage.jpg");
// Verify changes
var updatedHtmlContent = $("#exampleElement").html();
var updatedTextContent = $("#exampleElement").text();
var updatedInputValue = $("#textInput").val();
var updatedImageUrl = $("#image").attr("src");
console.log("Updated HTML Content:", updatedHtmlContent);
console.log("Updated Text Content:", updatedTextContent);
console.log("Updated Input Value:", updatedInputValue);
console.log("Updated Image URL:", updatedImageUrl);
</script>
</body>
</html>
The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.
