jQuery Api Method Insert Before() & Insert After()

jQuery insert content using before () & after() Method – how to use this both method with selected html elements. Here you will learn how use before() & after() method.

jQuery Insert Content Method

There are two type available for inserting content, You can use the both method of jquery before and after for insert content.

  • before() method
  • after() method

jQuery before() Method

Using the jQuery before() method, you can insert the specified content before the selected html elements. This method adds the content specified using the element id, name, class, tag etc.

Syntax

$(selector).before(content, function(index)); 

Parameters of before() method

ParameterDescription
ContentIt is a mandatory parameter. It specifies the content to insert. Its possible values are:HTML elementsjQuery objectsDOM elements
Function (index)It specifies a function that returns the content which is used to insert.Index: It provides the index position of the element in the set.

Example 1 of jQuery before() method

You can see that below example of jQuery before method and also try it out here.

<!DOCTYPE html>  
<html>  
<head>  
<title>Learn Jquery Before Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>  
$(document).ready(function(){  
    $("#btn_before").click(function(){  
        $("#first_before").before("<p><b>Hello there, thank for try</b></p>");  
    });  
});  
</script>  
</head>  
<body>  
<button id="btn_before" style="font-weight: bold; font-size: 16px; margin-top: 25px;">Click here for Insert content before "first_before" element</button>  
<p id="first_before">This is a programming tutorial website.</p>  
</body>  
</html>  
Learn Jquery Before Method

This is a programming tutorial website.

jQuery after() Method

Using the jQuery after() method, you can insert the specified content after the selected html elements. This method adds the content specified using the element id, name, class, tag etc.

Syntax

$(selector).after(content, function(index)); 

Parameters of jQuery after() method

ParameterDescription
ContentIt is a mandatory parameter. It specifies the content to insert. Its possible values are:HTML elementsjQuery objectsDOM elements
Function (index)It specifies a function that returns the content which is used to insert.index: It provides the index position of the element in the set.

Example of jQuery after() method

You can see that below example of jQuery before method and also try it out here.

<!DOCTYPE html>  
<html>  
<head>  
<title>Learn Jquery After Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>  
$(document).ready(function(){  
    $("#btn_after").click(function(){  
        $("#first_after").after("<p><b>Hello there, thank for try</b></p>");  
    });  
});  
</script>  
</head>  
<body>  
<button id="btn_after" style="font-weight: bold; font-size: 16px; margin-top: 25px;">Insert content after "first_after" element</button>  
<br>
<p id="first_after">This is a programming tutorial website.</p>  
</body>  
</html>  
Learn Jquery After Method

This is a programming tutorial website.

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *