This tutorial will show how to use jQuery append. It will also show how to append after and append before. Append actually means to add after. But this will show you how to use jQuery to insert content with these four functions.
| Before | After | |
| Inside | .prepend() | .append() |
| Outside | .before() | .after() |
.before() – Inserts content outside and before.
.prepend() – Inserts content inside and before.
.after() – Inserts content outside and after.
.append() – Inserts content inside and after.
See below how and where these 4 jQuery functions insert content. You will see how to use jQuery append. You will also see how to use prepend, before, and after.
jQuery Append, Prepend, Before, After HTML
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<head>
<body>
<div id="thisDiv"><span id="content">Original Content!</span></div>
</body>jQuery Append, Prepend, Before, After – jQuery Code
$(document).ready(function () {
$("#thisDiv").append("This is .append()");
$("#thisDiv").prepend("This is .prepend()");
$("#thisDiv").after("This is .after()");
$("#thisDiv").before("This is .before()");
});jQuery Append, Prepend, Before, After – Entire Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery append prepend before and after</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#thisDiv").append("This is .append()");
$("#thisDiv").prepend("This is .prepend()");
$("#thisDiv").after("This is .after()");
$("#thisDiv").before("This is .before()");
});
</script>
<style type="text/css">
#thisDiv {border: solid black 1px; padding: 5px; }
#content {color:Red;}
</style>
</head>
<body>
<div id="thisDiv"><span id="content">Original Content!</span></div>
</body>
</html>
