Prev Next

jQuery Get/Set

The jQuery get and set methods are used to retrieve and update values of HTML elements. These methods allow you to interact dynamically with content and attributes in your web pages.

Key Topics

Getting Content and Attributes

jQuery provides methods like text(), html(), and val() to get content, and attr() to get attributes of elements.

// Get text content
var textContent = $("#element").text();

// Get HTML content
var htmlContent = $("#element").html();

// Get input value
var inputValue = $("#inputField").val();

// Get attribute value
var attributeValue = $("#link").attr("href");

Explanation: These methods retrieve content or attribute values of the selected elements. For instance, text() gets the plain text, while html() retrieves HTML content.

Setting Content and Attributes

Methods like text(), html(), val(), and attr() are also used to set new content or attributes for elements.

// Set text content
$("#element").text("New Text Content");

// Set HTML content
$("#element").html("New HTML Content");

// Set input value
$("#inputField").val("New Value");

// Set attribute value
$("#link").attr("href", "https://newurl.com");

Explanation: These methods allow you to dynamically update content or attributes. For example, text() changes the text content, and attr() modifies the value of an attribute like href.

Example: Get and Set Operations


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Get/Set Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p id="textElement">Original Text</p>
    <input id="inputField" type="text" value="Original Value">
    <a id="link" href="https://example.com">Visit Example</a>
    <button id="getButton">Get Values</button>
    <button id="setButton">Set Values</button>

    <script>
        $(document).ready(function() {
            $("#getButton").click(function() {
                alert("Text: " + $("#textElement").text());
                alert("Input: " + $("#inputField").val());
                alert("Link: " + $("#link").attr("href"));
            });

            $("#setButton").click(function() {
                $("#textElement").text("Updated Text");
                $("#inputField").val("Updated Value");
                $("#link").attr("href", "https://updated.com");
            });
        });
    </script>
</body>
</html>

Explanation: This example demonstrates how to get and set values dynamically. Clicking "Get Values" retrieves current content or attributes, while "Set Values" updates them with new values.

Key Takeaways

  • Dynamic Interaction: Use text(), html(), val(), and attr() for both retrieval and updates.
  • Flexible Usage: These methods provide a simple way to interact with HTML elements dynamically.
  • Attribute Control: attr() is versatile for getting and setting attributes like href, src, and more.
Prev Next