Prev Next

jQuery Get

In jQuery, the get methods are used to retrieve content and attributes of elements. These methods allow dynamic access to element properties, enabling interactive web functionalities.

Key Topics

Getting Text Content

Use the text() method to get the text content of an element.

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

Explanation: This code retrieves the text content of the element with the ID element.

Getting HTML Content

Use the html() method to get the HTML content of an element, including its child elements and tags.

var htmlContent = $("#element").html();

Explanation: This code retrieves the HTML content of the element with the ID element, including any nested tags.

Getting Input Values

Use the val() method to retrieve the current value of an input field.

var inputValue = $("#inputField").val();

Explanation: This code gets the value of an input field with the ID inputField.

Getting Attributes

Use the attr() method to get the value of an attribute for an element.

var attributeValue = $("#link").attr("href");

Explanation: This code retrieves the href attribute value of a link element with the ID link.

Example: Get Methods


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

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

Explanation: This example uses buttons to retrieve the text content, input value, and link attribute dynamically when clicked.

Key Takeaways

  • Text Retrieval: Use text() to get plain text content.
  • HTML Retrieval: Use html() to access nested tags and content.
  • Input Values: Use val() to get the value of form elements.
  • Attribute Access: Use attr() to retrieve attributes like href and src.
Prev Next