Getting started with JQuery (3): operations on DOM objects and their attributes

Html ()-set or return the content of the selected element (including HTML tags)
Val ()-set or return the value of a form field
The attr () method is used to obtain the attribute value.

The following example shows how to obtain content through jQuery text (), html (), val (), attr:
Instance

$("#btn1").click(function(){alert("Text: " + $("#test").text());});$("#btn2").click(function(){alert("HTML: " + $("#test").html());});$("#btn1").click(function(){alert("Value: " + $("#test").val());});$("button").click(function(){alert($("#w3s").attr("href"));});

$("#btn1").click(function(){$("#test1").text("Hello world!");});$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){$("#test3").val("Dolly Duck");});$("button").click(function(){$("#w3s").attr("href","http://www.w3school.com.cn/jquery");});

The following example demonstrates text () html () and attr () with callback functions ():
Instance

$("#btn1").click(function(){$("#test1").text(function(i,origText){return "Old text: " + origText + " New text: Hello world!(index: " + i + ")";});});$("#btn2").click(function(){$("#test2").html(function(i,origText){return "Old html: " + origText + " New html: Hello <b>world!</b>(index: " + i + ")";});});$("button").click(function(){$("#w3s").attr("href", function(i,origValue){return origValue + "/jquery";});});