jQuery Get/Set


You may use certain jQuery methods to assign or read a value to a selection.Text(), html(), attr(), and val() are a few of these methods().

These methods are referred to as getters when they are called without an argument, since they get (or read) the value of the product. These methods are referred to as setters because they set (or assign) the value when called with a value as an argument.


The text() method


The text() method of jQuery is employed to obtain or set the combined text of the items, including their descendants.


Getting contents with the text() method


The following example demonstrates how to retrieve the contents of paragraphs' text:


$(document).ready(function(){
	// Get combined text contents of all paragraphs
	$(".btn-one").click(function(){
		var str = $("p").text();
		alert(str);
	});
	// Get text contents of the first paragraph
	$(".btn-two").click(function(){
		var str = $("p:first").text();
		alert(str);
	});
});
Live Demo!


Setting contents with the text() method


The following example demonstrates how to set a paragraph's text contents:



$(document).ready(function(){
	// Set text contents of all paragraphs
	$(".btn-one").click(function(){
		$("p").text("Demo text.");
	});
	// Set text contents of the first paragraph
	$(".btn-two").click(function(){
		$("p:first").text("Another demo text.");
	});
});
Live Demo!


The html() method


The html() method of the jQuery library is used to get or set the HTML content of objects.


The following example demonstrates how to obtain the HTML contents of paragraph elements as well as the container for the <div> element:



$(document).ready(function(){
	// Get HTML contents of first selected paragraph
	$(".btn-one").click(function(){
		var str = $("p").html();
		alert(str);
	});
	// Get HTML contents of an element with ID container
	$(".btn-two").click(function(){
		var str = $("#container").html();
		alert(str);
	});
});
Live Demo!


The following example demonstrates how to customize the HTML content of the <body> element: 



$(document).ready(function(){
	// Set HTML contents for document's body
	$("button").click(function(){
		$("body").html("<p>Hello World!</p>");
	});
});
Live Demo!


The attr() method


The jQuery attr() method can be used to get the value of an element's attribute or to set one or more of the element's attributes.


The following example demonstrates how to retrieve the href attribute of a hyperlink, i.e. the <a> element, as well as the alt attribute of an image:



$(document).ready(function(){
	// Get href attribute value of first selected hyperlink
	$(".btn-one").click(function(){
		var str = $("a").attr("href");
		alert(str);
	});
	// Get alt attribute value of an image with ID sky
	$(".btn-two").click(function(){
		var str = $("img#sky").attr("alt");
		alert(str);
	});
});
Live Demo!


The checked attribute of the checkbox can be set in the following example.



$(document).ready(function(){
	// Check all the checkboxes
	$("button").click(function(){
		$('input[type="checkbox"]').attr("checked", "checked");
	});
});
Live Demo!


You may also use the attr() method to set several attributes at once. The class and title attributes for the <img> elements are set in the following example.



$(document).ready(function(){
	// Add a class and title attribute to all the images
	$("button").click(function(){
		$("img").attr({
			"class" : "frame",
			"title" : "A random image"
		});
	});
});
Live Demo!