Imagine you’re a digital artist tasked with creating a dynamic and interactive webpage that showcases a series of paintings. Each painting is displayed as an image on the webpage. However, you want to add a touch of creativity by allowing users to see a “before” and “after” effect of each painting.
jQuery insert content/html element(div, span, button, etc) before and after; In this tutorial, you will learn how to add/insert html element (div, p, span, button, etc) or content using jQuery before () & after() method.
jQuery Add HTML Before and After 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
In jQuery, the before() method is used to insert content before the selected elements. It is often used to add new elements or content just before the target element(s) in the DOM (Document Object Model) structure.
The basic syntax of the before() method is as follows:
$(selector).before(content, function(index));
Parameters of 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 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>
This is a programming tutorial website.
jQuery after() Method
The jQuery .after() method is used to insert content or elements after the selected elements in a jQuery object. It allows you to dynamically add new content or elements to the DOM (Document Object Model) after the targeted elements. This method can be particularly useful for modifying the structure of a web page on-the-fly or for appending new elements after certain existing elements.
Here’s the basic syntax of the .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 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>
This is a programming tutorial website.
