jQuery before() and after()

jQuery before()

The jQuery before() method is used to insert content before the selected element.
$("h2").before("<p>New paragraph added</p>");
<h2>jQuery before()</h2>
run this source code Browser View

jQuery before()

In the above example will insert a paragraph before the container element h2 .

Full Source
<html> <head> <title>jQuery before method example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn").click(function(){ $("h2").before("<p>New paragraph added</p>"); }); }); </script> </head> <body> <button id="btn">Before</button> <h2>jQuery before()</h2> </body> </html>

jQuery after()

The jQuery after() method is used to insert content after selected element.
$("h2").after("<p>New paragraph added</p>");
<h2>jQuery after()</h2>

In the above example will insert a paragraph after the container element h2 .

run this source code Browser View

jQuery before()

Full Source
<html> <head> <title>jQuery after() method example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn").click(function(){ $("h2").after("<p>New paragraph added</p>"); }); }); </script> </head> <body> <button id="btn">After</button> <h2>jQuery before()</h2> </body> </html>