JQUERY - SETTER

Setter in JQuery simply means, to Set the contents of any HTML element.

Let us understand it with the below example, where we have a <p> element,

<p> New Code </p>

With content New Code. And we want to change the content of the <p> element to The content is changed.

And this can be achieved with the text() method.

text()

Example :


<html>
    <head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	<p> New Code </p>
    	
    	<button> Click to set a new value </button>
    	

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
      		$('button').click( function() {
				$('p').text("The content is changed");
			});
			
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have to change the text inside the <p> element.

<p> New Code </p>

And we have done it using the JQuery statement,

$('button').click( function() {
	$('p').text("The content is changed");
});

So, on button click, the text() function is called,

$('p').text("The content is changed");

And the content of <p> element gets replaced with, The content is changed.

This is because the text() function is used to set a new value to the <p> element.

Similarly, there are other Setter methods that helps us set the contents of the HTML elements.

In this tutorial, we will be discussing the commonly used setter methods i.e. text(), html(), val() and attr(),

html() - This method is used to set the contents of an HTML element.

val() - This method is used to set the value of an HTML form element.

attr() - This method is used to set the attribute of an HTML element.

And you can click on the below getter methods to understand in detail :

height() - This method is used to set the height of an HTML element.

width() - This method is used to set the width of an HTML element.

offset() - This method is used to set the offset position of an HTML element.

prop() - This method is used to set the properties of an HTML element.

scrollLeft() - This method is used to set the position of the Horizontal scrollbar of an HTML element.

scrollTop() - This method is used to set the position of the Vertical scrollbar of an HTML element.

html()

The html() method is used to set/change the contents of an HTML element.

Example :

 <html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p>
        	In a huge pond,  <br/>
            there lived many fish. <br/>
            They were arrogant and <br/>
            never listened to anyone.<br/>            
        </p>
        
        <button> Click to change </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').html('We have changed <br/> the contents of <br/> the p element');
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above example, we have a <p> element,

<p>
	In a huge pond,  <br/>
	there lived many fish. <br/>
	They were arrogant and <br/>
	never listened to anyone.<br/>
</p>

And a <button> element,

<button> Click to change </button>

And on buton click, the JQuery statement gets triggered,

$('button').click( function() {
	$('p').html('We have changed <br/> the contents of <br/> the p element');
});

And if you look at the output, the contents of the <p> element gets changed to,

We have changed
the contents of
the p element

And this is because of the html() method that helps us insert the line break as well.

$('p').html('We have changed <br/> the contents of <br/> the p element');

Just remember, you can insert any html element in your code using html() method.

Say, for example, you want to insert an <input> element in your existing code. Let us see in the below example,

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p></p>
        
        <button> Click to insert </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').html('Type anything : <input type = "text"/>');
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above code, on button click, the <input> element gets inserted within the <p> element.

Type anything : <input type = "text"/>

val()

The val() method is used to set the value of an HTML form element.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	Click on the below button to set value to 'Hello World' : <input type = "text"/>
        
        <br/><br/>
        
        <button> Click it </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('input').val('Hello World');
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if we look at the above code, we have an <input> element(Just remember, <input> element is a part of the <form> element).

<input type = "text"/>

And we have a <button> element,

<button> Click it </button>

And on buton click, the JQuery statement gets triggered,

$('button').click( function() {
	$('input').val('Hello World');
});

And if you see the above output, the content of the <input> element gets changed to Hello World.

This is because the val() method is used to set the value of the <input> element to Hello World.

$('input').val('Hello World');

attr()

The attr() method is used to set/change the attribute of an HTML element.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<button> Click to increase the height of the below image </button> <br/><br/>
		<img src="airplane.jpg" alt="Airplane" width="150" height="103">
	  
      	<script>
      
			$('button').click( function() { 
            	$('img').attr("height", "200");
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if we look at the above code, we have a <button> element,

<button> Click to increase the height of the below image </button>

And we have an <input> element that has an attribute i.e. "type = text".

<input type = "text"/>

And on buton click, the JQuery statement gets triggered,

$('button').click( function() {
	$('img').attr("height", "200");
});

And locates the <img> element and increases the height of the <img> element to 200.

$('img').attr("height", "200");

This is because the attr("height", "200") method is used to set/change the attribute i.e. height of the <input> element.

Now, what if you want to change, both height and width of the <img> element?

Let us see in the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<button> Click to increase the height and width of the below image </button> <br/><br/>
		<img src="airplane.jpg" alt="Airplane" width="150" height="103">
	  
      	<script>
      
			$('button').click( function() { 
            	$('img').attr({height: "200", width: "300"});
            });
            
      	</script>      
  	</body>
</html>

Output :

So, we have modified the above example to modify the height and width.

And all we have done is, modified the attr() method of the JQuery element.

$('img').attr({height: "200", width: "300"});

So, inside the attr() method, we have used the new values of height and width enclosed within braces (i.e. {}).

❮❮ PREV NEXT ❯❯