Getting and setting content
Retrieving and setting text, values and HTML is the simplest aspect of manipulation of DOM. It seems same but they’re not. There are text(), html() and val() methods.
jQuery html() method
Using the jQuery HTML method, you can change the entire content of the selected element and replace them with the new content. Here is the example of get the content:<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<h2 id="test"> Welcome to <b>tutorialandexample.com</b></h2>
<button id="btn2">Click here to show HTML</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery html() example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html("Welcome to <b>tutorialandexample.com </b>");
});
});
</script>
</head>
<body>
<button>click here to change p elements content </button>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>
jQuery text() method
jQuery text() method is used to set or return the text content of selected elements without HTML markup. Using the jQuery HTML method, you can change the entire content of the selected element and replace them with the new content. Here is the example to get the content using the text() method:<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
alert("TEXT: " + $("#test").text());
});
});
</script>
</head>
<body>
<p id="test"> Welcome to <b>tutorialandexample.com </b></p>
<button id="btn2">Click here to Show TEXT</button>
</body>
</html>
Try Now
<!DOCTYPE html>
<html>
<head>
<title>jQuery text() example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Welcome to tutorialandexample.com");
});
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<button>click here to change p elements content </button>
</body>
</html>
jQuery val() method
jQuery val() method is used to set or return the value of form fields. It is used to get first element’s current value in the set of matched elements and also set every matched element value. To get the value of an input field using the val() method:<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
<button>Click here to Show Value</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn3").click(function(){
$("#test3").val("Chetan bhagat");
});
});
</script>
</head>
<body>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn3">Click here to Set Value</button>
</body>
</html>