Here is the live example with code where I’m appending the content using jQuery append() method:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Append On Click Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="container">
<!-- Existing content -->
<p>Existing Content</p>
<!-- Button to trigger append -->
<button id="appendButton">Append Content</button>
</div>
<script src="script.js"></script>
</body>
</html>JavaScript
$(document).ready(function() {
// Handle click event on the button
$('#appendButton').click(function() {
// Create new content to append
var newParagraph = $('<p>Newly Appended Content</p>');
// Use append() to add the new content to the container
$('#container').append(newParagraph);
});
});