jQuery Get and Set Methods
What are jQuery Get and Set Methods?
jQuery provides methods to get and set content, attributes, and properties of HTML elements.
• Get Methods – Retrieve information from an element.
• Set Methods – Modify or update the content, attributes, or properties of an element.
Why Use jQuery Get and Set Methods?
✅ Easier than vanilla JavaScript – Short and simple syntax.
✅ Works with multiple elements at once – Modify many elements in one line.
✅ Dynamic updates – Change webpage content in real-time.
jQuery Get Methods
| Method | Description |
|---|---|
| text() | Gets the text content of an element. |
| html() | Gets the HTML content inside an element. |
| val() | Gets the value of form inputs (text fields, checkboxes, etc.). |
| attr() | Gets the attribute value of an element (like href, src, alt, etc.). |
1. Get Text Content – text()
Retrieves only the text inside an element (ignores HTML tags).
👉 Example: Get the text inside a paragraph.
$(“#getTextBtn”).click(function() {
alert(“Text: ” + $(“#para”).text());
});
📌 What happens?
• Clicking the button shows an alert with the paragraph’s text.
2. Get HTML Content – html()
Retrieves the inner HTML (including HTML tags).
👉 Example: Get HTML content inside a div.
$(“#getHtmlBtn”).click(function() {
alert(“HTML: ” + $(“#box”).html());
});
📌 What happens?
• Clicking the button shows an alert with the div’s HTML content.
3. Get Input Value – val()
Retrieves the value of form elements (like text fields).
👉 Example: Get the value entered in a text box.
$(“#getValBtn”).click(function() {
alert(“Input Value: ” + $(“#nameInput”).val());
});
📌 What happens?
• Clicking the button shows an alert with the text inside the input field.
4. Get Attribute Value – attr()
Retrieves the value of an attribute like href, src, or alt.
👉 Example: Get the href of a link.
$(“#getAttrBtn”).click(function() {
alert(“Link URL: ” + $(“#myLink”).attr(“href”));
});
📌 What happens?
• Clicking the button shows an alert with the URL of the link.
jQuery Set Methods
| Method | Description |
|---|---|
| text() | Sets new text content inside an element. |
| html() | Sets new HTML content inside an element. |
| val() | Sets new value inside form inputs. |
| attr() | Sets new attribute values (like href, src, etc.). |
1. Set Text Content – text()
Replaces the existing text inside an element.
👉 Example: Change the text of a paragraph.
$(“#setTextBtn”).click(function() {
$(“#para”).text(“This is new text!”);
});
📌 What happens?
• Clicking the button replaces the paragraph text with new content.
2. Set HTML Content – html()
Replaces the inner HTML of an element.
👉 Example: Change the content inside a div.
$(“#setHtmlBtn”).click(function() {
$(“#box”).html(“<b>New bold content!</b>”);
});
📌 What happens?
• Clicking the button replaces the content inside the div with bold text.
3. Set Input Value – val()
Changes the value of a form input field.
👉 Example: Set a new value inside a text box.
$(“#setValBtn”).click(function() {
$(“#nameInput”).val(“John Doe”);
});
📌 What happens?
• Clicking the button fills the input field with “John Doe”.
4. Set Attribute Value – attr()
Changes attribute values like href, src, etc.
👉 Example: Change the href of a link.
$(“#setAttrBtn”).click(function() {
$(“#myLink”).attr(“href”, “https://www.google.com”);
});
📌 What happens?
• Clicking the button changes the link URL to “https://www.google.com”.
Conclusion
🎯 text(), html(), val(), and attr() are used to get and set content.
🎯 attr() can modify attributes like href, src, alt, etc.
🎯 These methods help dynamically update content on a webpage.
