jQuery Add HTML Before and After Element

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

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

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

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.

Recommended jQuery Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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