Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Inserting Multiple Elements Before or After the Elements in jQuery</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var newHeading = "<h2>Important Note:</h2>"; var newParagraph = document.createElement("p"); newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>"; var newImage = $('<img src="/examples/images/smiley.png" alt="Symbol">'); $("p").before(newHeading, newParagraph, newImage); }); }); </script> </head> <body> <button type="button">Insert Contents</button> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante, metus ac nisl bibendum.</p> </body> </html>