Getters & Setter
In this tutorial you will learn how to get or set the element's content and attribute value as well as the from control value using jQuery.
Some jQuery methods can be used to either assign or read some value on a selection. A few of these methods are text()
, html()
, attr()
, and val()
.
When these methods are called with no argument, it is referred to as a getters, because it gets (or reads) the value of the element. When these methods are called with a value as an argument, it's referred to as a setter because it sets (or assigns) that value.
text()
MethodThe jQuery text()
method is either used to get the combined text contents of the selected elements, including their descendants, or set the text contents of the selected elements.
text()
MethodThe following example will show you how to get the text contents of paragraphs:
<script>
$(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);
});
});
</script>
text()
MethodThe following example will show you how to set the text contents of a paragraph:
<script>
$(document).ready(function(){
// Set text contents of all paragraphs
$(".btn-one").click(function(){
$("p").text("This is demo text.");
});
// Set text contents of the first paragraph
$(".btn-two").click(function(){
$("p:first").text("This is another demo text.");
});
});
</script>
html()
MethodThe jQuery html()
method is used to get or set the HTML contents of the elements.
html()
MethodThe following example will show you how to get the HTML contents of the paragraph elements as well as a <div>
element container:
<script>
$(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);
});
});
</script>
html()
MethodThe following example will show you how to set the HTML contents of the <body>
element:
<script>
$(document).ready(function(){
// Set HTML contents for document's body
$("button").click(function(){
$("body").html("<p>Hello World!</p>");
});
});
</script>
val()
MethodThe jQuery val()
method is mainly used to get or set the current value of the HTML form elements such as <input>
, <select>
and <textarea>
.
val()
MethodThe following example will show you how to get the values of form controls:
<script>
$(document).ready(function(){
// Get value of a text input with ID name
$("button.get-name").click(function(){
var name = $('input[type="text"]#name').val();
alert(name);
});
// Get value of a textarea with ID comment
$("button.get-comment").click(function(){
var comment = $("textarea#comment").val();
alert(comment);
});
// Get value of a select box with ID city
$("button.get-city").click(function(){
var city = $("select#city").val();
alert(city);
});
});
</script>
val()
MethodThe following example will show you how to set the values of the form controls:
<script>
$(document).ready(function(){
// Set value of all the text inputs
$("button").click(function(){
var text = $(this).text();
$('input[type="text"]').val(text);
});
});
</script>