<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Inserting HTML Contents Before the Elements in jQuery</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function () { // Add content before heading on button click $("#b1").click(function(){ $("h1").before("Before Heading"); }); // Add content before paragraph on button click $("#b2").click(function(){ $("p").before("Before Paragraph"); }); }); </script> </head> <body> <h1>jQuery Insert New Content</h1> <hr/> <button type="button" id="b1">Insert Before Heading</button> <button type="button" id="b2">Insert Before Paragraph</button> <hr/> <p>A paragraph</p> <hr/> </body> </html>