jQuery insert content after and before using jQuery before () & after() Method; Through this tutorial, i am going to show you how to insert content before and after with selected html elements using jQuery before() & after() method.
jQuery Insert Content Inside, Before or After an Element
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 jQuery before() Method
$(selector).before(content, function(index));
Parameters of jQuery before() Method
| Parameter | Description |
|---|---|
| Content | It 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 – jQuery Insert Content Before an Element
See the following example for jQuery insert content before an element:
<!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>
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 jQuery after() Method
$(selector).after(content, function(index));
Parameters of jQuery after() method
| Parameter | Description |
|---|---|
| Content | It 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 – jQuery Insert Content After an Element
See the following example of jQuery insert content after an element:
<!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>