How to add attributes to an HTML element using jQuery

Complete Program for adding required attribute, and setting some value in html element using jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Adding Attribute to HTML Element Using jQuery</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(document).ready(function(){
			$(".add-attribute").click(function(){  
				// Setting Checkbox is checked
				$('input[type="checkbox"]').attr("checked", "checked"); 
				// Setting a test value in textbox
				$('input[type="text"]').attr("value", "My Name is Shailendra"); 
			});
		});
	</script> 
</head>
<body>
    <h3>Adding Attribute to HTML Element Using jQuery</h3>
    <input type="checkbox"> <br/>
	<input type="text"> <br/><br/>
	<button type="button" class="add-attribute">Click Action</button>
</body>
</html>

Method 1:

<script>
	// Adding Required Attribute to #first_name 
	$('#first_name').attr('required', 'required');

	// Removing Required Attribute from #first_name 
	$('#first_name').removeAttr('required');  
</script>

Method 2:

<script>
	// Adding Required Attribute to #first_name 
	$('#first_name').prop('required', true);

	// Removing Required Attribute from #first_name 
	$('#first_name').prop('required', false);
</script>