jQuery append


The jQuery append method insert content, at the end of EACH element in the set of matched elements. The element to be inserted is specified by the parameter,

jQuery prepend


The jQuery prepend method insert content, to the beginning of EACH element in the set of matched elements. The element to be inserted is specified by the parameter,

The example shows the usage of the prepend and append method.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var i = 0;
jQuery(document).ready(function(e) {
  $('#bt1').click(function(e) {
    i++;
    $('#container').append('<input type="button" value="'+i+'" />');
  });
  $('#bt2').click(function(e) {
    i++;
    $('#container').prepend('<input type="button" value="'+i+'" />');
 });



});
</script>
<title>Example 03</title>
</head>

<body>
    <input id='bt1' type='button' value='add node first'/>
    <input id='bt2' type='button' value='add node last'/>     
    <div id="container"></div>
</body>
</html>




You may like to try this example here.