HTML METHODS - html()

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

html() as Getter method

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<button> Click to get the HTML </button> 
    	
    	<p>
        	In a huge pond,  <br/>
            there lived many fish. <br/>
            They were arrogant and <br/>
            never listened to anyone.<br/>            
        </p>
	  
      	<script>
      
			$('button').click( function() { 
            	alert($('p').html());
            });
            
      	</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 get the HTML </button>

And on buton click, the JQuery statement gets triggered,

$('button').click( function() {
	alert($('p').html());
});

And an alert is generated,

alert($('p').html());

And all we have done is used the getter method html() to get the contents of the <p> element.

$('p').html()

Now, if we see the output (i.e. The alert),

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

We can see the <br/> elements are also displayed. This is because the html() method is used to get the HTML content of the <p> element.

html() as Setter method

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.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://ajax.googleapis.com/ajax/libs/jquery/3.7.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"/>

❮❮ PREV NEXT ❯❯