Append and Prepend in jQuery – Bajrangi Tech <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Append and Prepend in jQuery</title> <style> .main{ width: 600px; height: auto; background-color: whitesmoke; display: flex; justify-content: space-around; align-items: center; padding: 20px 0px 50px 0px; } </style> </head> <body> <div class="main"> <div> <h2 id="addappendtxt">Append Methods</h2> <button id="append">Append</button> </div> <div> <h2 id="addprependtxt">Prepend Methods</h2> <button id="prepend">Prepend</button> </div> </div> <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script> $(document).ready(function(){ $("#append").click(function(){ $("#addappendtxt").append("<p>Appended Text</p>"); }) $("#prepend").click(function(){ $("#addprependtxt").prepend("<p>Prepended Text</p>"); }) }) </script> </body> </html> Run
