The jQuery html() method is used to get or set the HTML contents of the elements.
Get HTML Contents with html() Method
The following example will show you how to get the HTML contents of the paragraph elements as well as a <div> element container:
Example
<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>Note: If multiple elements are selected, the html() method only returns the HTML contents of the first element from the set of matched elements.
Set HTML Contents with html() Method
The following example will show you how to set the HTML contents of the <body> element:
Example
<script>
$(document).ready(function(){
// Set HTML contents for document's body
$("button").click(function(){
$("body").html("<p>Hello World!</p>");
});
});
</script>jQuery attr() Method
You can use the jQuery attr() method to either get the value of an element’s attribute or set one or more attributes for the selected element.
Get Attribute Value with attr() Method
The following example will show you how get the href attribute of the hyperlink i.e. the <a> element as well as the alt attribute of an <img> element:
Example
<script>
$(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);
});
});
</script>Note: If multiple elements are selected, the attr() method only returns the attribute value of the first element from the set of matched elements.
Set Attributes with attr() Method
The following example will show you how to set the checked attribute of the checkbox.
Example
<script>
$(document).ready(function(){
// Check all the checkboxes
$("button").click(function(){
$('input[type="checkbox"]').attr("checked", "checked");
});
});
</script>The attr() method also allows you to set multiple attributes at a time. The following example will show you how to set the class and title attribute for the <img> elements.
Example
<script>
$(document).ready(function(){
// Add a class and title attribute to all the images
$("button").click(function(){
$("img").attr({
"class" : "frame",
"title" : "Hot Air Balloons"
});
});
});
</script>jQuery val() Method
The jQuery val() method is mainly used to get or set the current value of the HTML form elements such as <input>, <select> and <textarea>.
Get the Values of Form Fields with val() Method
The following example will show you how to get the values of form controls:
Example
<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>Note: If multiple form elements are selected, the val() method only returns the value of the first element from the set of matched elements.
Set the Values of Form Fields with val() Method
The following example will show you how to set the values of the form controls:
Example
<script>
$(document).ready(function(){
// Set value of all the text inputs
$("button").click(function(){
var text = $(this).text();
$('input[type="text"]').val(text);
});
});
</script>