jQuery GET or SET - HTML Contents and Attributes
jQuery includes a number of useful methods for altering and manipulating HTML elements and attributes.
jQuery DOM Manipulation
The ability to alter the DOM is a crucial feature of jQuery.
A number of DOM-related functions are included in jQuery, making it simple to access and edit html elements and attributes.
DOM = Document Object Model
The DOM establishes a standard for interacting with HTML and XML documents :
The W3C Document Object Model (DOM) is a platform and language-independent interface that enables programmes and scripts to dynamically access and alter a document's content, structure, and style.
Set or Get HTML Content - text(), html(), and val() Methods
Three basic yet important DOM manipulation jQuery techniques are:
text()- The text content of selected components is set or returned.html()- Sets or returns the content of the elements that have been specified (including HTML markup).val()- The value of form input fields is set or returned.
Example:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
alert("Text: \n\n" + $("#p1").text());
});
$("#b2").click(function () {
alert("HTML: \n\n" + $("#p1").html());
});
$("#b3").click(function () {
$("#p2").text("The <b>text()</b> method will <b>ignore html output</b> and <i>print</i> the tags as it is.");
});
$("#b4").click(function () {
$("#p2").html("The <b>html()</b> method will <b>display the content</b> in <u>HTML</u> format.");
});
$("#b5").click(function () {
alert("Value: \n\n" + $("#name1").val());
});
$("#b6").click(function () {
$("#name1").val("xyz");
});
});
</script>
</head>
<body>
<p id="p1">This is some <b>bold</b> text and <u>underline</u> in a paragraph.</p>
<button id="b1">Show Text</button>
<button id="b2">Show HTML</button>
<br /><br />
<p id="p2">Click the below button to see result.</p>
<button id="b3">Change Text</button>
<button id="b4">Change HTML</button>
<br /><br />
Enter Name: <br /><br />
<input type="text" id="name1" value="abc" style="width:auto" /><br />
<button id="b5">Get Value</button>
<button id="b6">Set Value</button>
</body>
</html> Output :-
This is some bold text and underline in a paragraph.
Click the below button to see result.
Enter Name:
Related Links
Set or Get Attributes - attr() Method
The attr() function of jQuery is used to set or get attribute value of selected element.
Use the following syntax to assign single attribute:
css("attributename","value"); Use the following syntax to assign multiple attributes at once:
css({"attributename1":"value1","attributename2":"value2",...}); Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
alert($("#A1").attr("href"));
});
$("#btn2").click(function () {
$("#A1").attr("href", "https://www.wikipedia.org");
alert("The HREF values has been changed!");
});
});
</script>
</head>
<body>
<p><a id="A1" href="https://www.simmanchith.com" target="_blank">simmanchith.com</a></p>
<button id="btn1">Show HREF Value</button><br /><br />
<button id="btn2">Change HREF Value</button>
</body>
</html> Output :-
Tip:- Mouse over the link (or click on it) to see that the value of the href attribute has changed.
A Callback Function for attr() Method
A callback function is included with the jQuery method attr(). The current element's index in the list of chosen items, as well as the original (old) attribute value, are both sent to the callback function. Then, from the function, you return the string you want to use for the new attribute value.
Related Links