Objectives and outcomes

In this tutorial we are going to learn about jquery set attribute and content methods. We will be using the same 3 methods which we have used in our Jquery get attribute tutorial.The example shows how to set the content using text() and html() methods.









On clicking the text-content button the normal text appears while on clicking html-content button the bold tag is also added to content.



HTML code:

<html>
<head>
<meta charset="utf-8">
<title>Set attribute method</title>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<div id="example">
<br/>
</div><br/>
<button type="submit" id="butn1">Text-content</button><br/>
<button type="submit" id="butn2">Html-content</button>
</body>
</html>


CSS stylesheet

<style>
#example
{
color:#000;
font-size:24px;
height:100px;
margin-left:auto;
}
</style>


Javascript

<script>
$(document).ready(function()
{
$('#butn1').click(function()
{
$('#example').text('Welcome to codeshot.in !!');
});
		
$('#butn2').click(function()
{
$('#example').html('<b>Jquery , write less do more !!</b>');
});
});
</script>




Setting values of attributes using attr() method






If you click on the link before clicking on the button then you will be redirected to our jquery menu page but after clicking on the button the link gets changed and also the title is added



HTML code:
<html>
<head>
<meta charset="utf-8">
<title>Set attribute method</title>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<div id="example1">
<br/>
<a id="link" href="http://codeshot.in/jquery-category.php" style="text-decoration:underline;">Click Here</a>
</div><br/>
<button type="submit" id="butn3">Text-content</button><br/>
</body>
</html>


CSS will remain same as of above.


Javascript
<script>
$(document).ready(function()
{		
$('#butn3').click(function()
{
$('#link').attr({
"href" : "http://codeshot.in/jquery/jquery_set_attribute.php",
"title" : "This title is added after the user have clicked on below button"
});
});
});
</script>