jQuery - Get Content and Attributes

❮ Previous Next ❯

jQuery has strong tools for modifying and controlling HTML elements and their characteristics.

jQuery DOM Manipulation

An essential aspect of jQuery is its ability to control the structure of a web page.

jQuery includes many handy functions for working with HTML elements and their properties, making it simple to find and change things on a webpage.

DOM = Document Object Model

The DOM sets rules to access HTML and XML documents.

The Document Object Model (DOM) by W3C is a universal interface that enables programs and scripts to interactively access and modify the content, structure, and style of a document.

Get Content - text(), html(), and val()

Here are three handy jQuery techniques for working with web page elements:

text() - Sets or returns the text content of selected elements
html() - Sets or returns the content of selected elements (including HTML markup)
val() - Sets or returns the value of form fields

In this example, we'll show you how to retrieve content using the jQuery methods text() and html().

Here's a simple explanation of how to retrieve the content from an input field using the jQuery method called val().

Get Attributes - attr()

The jQuery method called attr() is used to fetch the values of attributes.

This example shows how to find the web address (URL) stored in a link's href attribute:

The following section describes how to modify the content and properties of elements in a web page.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script>
      $(document).ready(function() {
        $("#btn1").click(function() {
          alert("Text: " + $("#test").text());
        });
        $("#btn2").click(function() {
          alert("HTML: " + $("#test").html());
        });
      });
    </script>
  </head>
  <body>
    <p id="test">This is some <b>bold</b> text in a paragraph. </p>
    <button id="btn1">Show Text</button>
    <button id="btn2">Show HTML</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script>
      $(document).ready(function() {
        $("button").click(function() {
          alert("Value: " + $("#test").val());
        });
      });
    </script>
  </head>
  <body>
    <p>Name: <input type="text" id="test" value="Mickey Mouse">
    </p>
    <button>Show Value</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script>
      $(document).ready(function() {
        $("button").click(function() {
          alert($("#ppts").attr("href"));
        });
      });
    </script>
  </head>
  <body>
    <p>
      <a href="https://www.propertutorials.com" id="ppts">Propertutorials.com</a>
    </p>
    <button>Show href Value</button>
  </body>
</html>

❮ Previous Next ❯

jQuery

jQuery | Syntax

jQuery | Selectors and Event Methods

jQuery Selectors

jQuery Events

jQuery HTML/CSS

jQuery - Get Content and Attributes

jQuery DOM Manipulation

Get Content - text(), html(), and val()

Get Attributes - attr()

Web Development