❮❮ PREV NEXT ❯❯

JQUERY - INSERT

Say, you want to make any modification to the existing HTML document. And this is where the Insert methods in JQuery comes into picture.

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

<p> New Code </p>

With content New Code. And we want to add a new content plus another code, and make it New Code plus another code.

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

append()

The append() method is used to insert a content at the end of an HTML element.

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').append(" plus another code");
			});
			
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have to to add a new content plus another code, and make it New Code plus another code

<p>New Code</p>

And we have done it using the JQuery statement,

$('button').click( function() {
	$('p').append(" plus another code");
});

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

$('p').append(" plus another code");

And the content of element

New Code

Is added with,

plus another code

And the new content is printed on the screen,

New Code plus another code

Similarly, there are other Insert methods that helps us modify the contents of the HTML elements.

In this tutorial, we will be discussing the commonly used Insert methods i.e. append(), prepend(), after() and before(),

prepend() - This method is used to insert a content at the beginning of an HTML element.

after() - This method is used to insert a content right after an HTML element.

before() - This method is used to insert a content right before an HTML element.

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

appendTo() - This method is used to insert HTML element at the end of an HTML element.

prependTo() - This method is used to insert HTML element at the beginning of an HTML element.

insertAfter() - This method is used to insert HTML element right after an HTML element.

insertBefore() - This method is used to insert HTML element right before an HTML element.

prepend()

The prepend() method is used to insert a content at the beginning of an HTML element.

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').prepend("Added new content at the beginning ");
			});
			
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have to to add a new content

'Added new content at the beginning '

At the beginning of,

<p>New Code</p>

And make it

Added new content at the beginning New Code

And we have done it using the JQuery statement,

$('button').click( function() {
	$('p').prepend("Added new content at the beginning ");
});

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

$('p').prepend("Added new content at the beginning ");

And the content of element,

New Code

Is added with,

Added new content at the beginning

At the beginning, and the new content is printed on the screen,

Added new content at the beginning New Code

after()

The after() method is used to insert a content after an HTML element.

Example :

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

  	<body>
    	<h1> JQuery </h1>
    	<p>New Code</p>
    	
    	<button> Click Here </button>
    	

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
      		$('button').click( function() {
				$('p').after("<p> This is a new paragraph </p>");
			});
			
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have to to add a new content  This is a new paragraph , right after the element,

<p>New Code</p>

And we have done it using the JQuery statement,

$('button').click( function() {
	$('p').after("<p> This is a new paragraph </p>");
});

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

$('p').after("<p> This is a new paragraph </p>");

And the new content,

<p> This is a new paragraph </p>

Is added after,

<p>New Code</p>

Just note that This is a new paragraph is a new element that is added after the element.

before()

The before() method is used to insert a content before an HTML element.

Example :

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

  	<body>
    	<h1> JQuery </h1>
    	<p>New Code</p>
    	
    	<button> Click Here </button>
    	

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
      		$('button').click( function() {
				$('p').before("<p> This is a new paragraph </p>");
			});
			
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have to to add a new content  This is a new paragraph , right before the element,

<p>New Code</p>

And we have done it using the JQuery statement,

$('button').click( function() {
	$('p').before("<p> This is a new paragraph </p>");
});

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

$('p').before("<p> This is a new paragraph </p>");

And the new content,

<p> This is a new paragraph </p>

Is added before,

<p>New Code</p>

Just note that This is a new paragraph is a new element that is added before the element.

❮❮ PREV NEXT ❯❯