January 05, 2025
jQuery append and prepend methods
In jQuery append() and prepend() methods are used to insert content (text or html tags) into selected HTML tags. With using prepend method we can inserts content at first place of the selected tags and with using append method we can inserts content at the end of the selected tags. Below are example of append() and prepend() methods:
append() & prepend() methods example
<html>
<head>
<title>Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="sourceElem">
Source Content
</div>
<br>
<button id="btnPrependText">Prepend example</button>
<button id="btnAppendText">Append example</button>
<script>
$(document).ready(function () {
$('#btnPrependText').on('click', function () {
$("#sourceElem").prepend("Prepended paragraph example.
");
});
$('#btnAppendText').on('click', function () {
$("#sourceElem").append("Append paragraph example.
");
});
});
</script>
</body>
</html>