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.
jQuery Get
Some jQuery methods can be used to either assign or read some value on a selection.
Three simple, but useful, jQuery methods for DOM manipulation are:
text()– Sets or returns the text content of selected elements.html()– Sets or returns the content of selected elements (including HTML markup).val()– Sets or returns the value of form fields.
When these methods are called with no argument, it is referred to as a getter, 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.
Get Contents with text() Method
<script>
$(document).ready(function(){
$(“.btn-one”).click(function(){
var str = $(“p”).text();
alert(str);
});
});
</script>
<body>
<p>This is Roshan</p>
<button type=”button” class=”btn-one” >click</button>
</body>
Get Contents with Html() Method
<script>
$(document).ready(function(){
$(“.btn-two”).click(function(){
var str = $(“#rk”).html());
alert(str);
});
});
</script>
<body>
<p id =”rk”>This is <b>Roshan Kumar Jha</b></p>
<button type=”button” class=”btn-two” >click me</button>
</body>
Get Contents with Val() Method
<script>
$(document).ready(function(){
$(“.btn-two”).click(function(){
var str = $(“#title”).val());
alert(str);
});
});
</script>
<body>
<input type=”text” value=”Roshan Jha” id=”title” >
<button type=”button” class=”btn-two” >click me</button>
</body>