jQuery Get Content Methods

1. jQuery Get – DOM Manipulation

jQuery provides powerful methods to extract data from your webpage, allowing you to access and manipulate content, input values, and attributes with ease. In this jQuery tutorial, you will learn how to use the get methods to retrieve text, HTML markup, form values, and attribute values in real-time without reloading the page.

1.1. jQuery Get Methods For DOM Manipulation

Here are some key methods to retrieve data for building dynamic and interactive frontend applications. jQuery methods for DOM manipulation are:

• .text(): Retrieves the text content of an element.
• .html(): Fetches the HTML content of an element.
• .val(): Gets the value of form input fields.
• .attr(): Retrieves the value of a specific attribute.
• .prop(): Retrieves the value of a property (e.g., checked, disabled).
• .data(): Gets data attributes associated with an element.

2. Get Text Content with text() Method

The text() method in jQuery is used to get the plain text content of selected elements. This means it retrieves the text inside HTML tags without including the tags themselves.

$(document).ready(function(){
	$("#getTextBtn").click(function(){
		var paraText = $("#textPara").text();
		$("#output").text("Paragraph Text: " + paraText);
	});
});

3. Get HTML Content with html() Method

The html() method in jQuery is used to get the HTML content of selected elements. This means it retrieves the HTML code inside the elements, including any nested tags.

$(document).ready(function(){
  $("#getHtml").click(function(){
	var htmlContent = $("#content").html();
	$("#result").text(htmlContent);
  });
});

4. Get Form Field Value with val() Method

To get the current value of an input field (text, password, select, etc.), use val() jQuery method. This is handy for working with HTMLforms and dynamic data.

$(document).ready(function(){
  $("#getUsername").click(function(){
	var userName = $("#username").val();
	$("#output").text("Username: " + userName);
  });
});

This jQuery example retrieves form values (username, email, and city) when the submit button is clicked and displays them in a table. It uses .val() method to get input values and .text() method to display the results.

$(document).ready(function(){
  $("#submitBtn").click(function(){
	var username = $("#username").val();
	var email = $("#email").val();
	var city = $("#city").val();

	$("#showUsername").text(username);
	$("#showEmail").text(email);
	$("#showCity").text(city);

	$("#resultTable").show();
  });
});

5. Get Element Attributes with attr() Method

To read the value of any HTML attribute like href, src, id, etc, use the attr() method. This example demonstrates how to get the value of the href and src attributes using jQuery attr() method.

$(document).ready(function(){
  $('#getAttrBtn').click(function(){
	var linkHref = $('#myLink').attr('href');
	var imageSrc = $('#myImage').attr('src');

	$('#linkInfo').text("Link Href: " + linkHref);
	$('#imgInfo').text("Image Src: " + imageSrc);
  });
});

6. Get Element Properties with prop() Method

The prop() method in jQuery retrieves the value of a property on the selected element, such as checked, selected, or disabled. It’s useful when working with form controls like checkboxes, radio buttons, or disabled fields to get their current state.

$(document).ready(function(){
  $('#checkStatusBtn').click(function(){
	var isChecked = $('#newsletterCheckbox').prop('checked');
	var isDisabled = $('#emailField').prop('disabled');

	$('#checkedInfo').text("Checkbox Checked: " + isChecked);
	$('#disabledInfo').text("Email Field Disabled: " + isDisabled);
  });
});

7. Get Custom Data with data() Method

To retrieve custom data associated with an element, use the data() jQuery method. This method can access data stored using data-* attributes in HTML or data previously set using jQuery's .data() method.

This example shows how to retrieve data-id and data-category from a product element using jQuery.

$(document).ready(function(){
	$('#getDataBtn').click(function(){
		var productId = $('#myProduct').data('id');
		var productCategory = $('#myProduct').data('category');

		$('#idInfo').text("Product ID: " + productId);
		$('#categoryInfo').text("Category: " + productCategory);
	});
});

8. Use Cases of jQuery Get Methods

• Read input values before submitting forms via AJAX.
• Fetch dynamic HTML from selected elements for display or comparison.
• Extract attribute data to build image galleries, tooltips, or tracking analytics.
• Retrieve raw content for validation or preprocessing before further DOM manipulation.