Both jQuery append() and appendTo() methods are doing the same task, add a text or html content after the content of the matched elements. The major difference is in the syntax.

For example,


<div class="box">I'm a big box</div>
<div class="box">I'm a big box 2</div>

1. $(‘selector’).append(‘new text’);


$('.box').append("<div class='newbox'>I'm new box by prepend</div>");

2. $(‘new text’).appendTo(‘selector’);


$("<div class='newbox'>I'm new box by appendTo</div>").appendTo('.box');

Result

Both methods above are doing the same task, but with different syntax, the new contents after append() or appendTo() will become


<div class="box">
   I'm a big box
   <div class='newbox'>I'm new box by prepend</div>
</div>

<div class="box">
   I'm a big box 2
   <div class='newbox'>I'm new box by prepend</div>
</div>

Try it yourself


<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	.box{
		padding:8px;
		border:1px solid blue;
		margin-bottom:8px;
		width:300px;
		height:100px;
	}
	.newbox{
		padding:8px;
		border:1px solid red;
		margin-bottom:8px;
		width:200px;
		height:50px;
	}
</style>

</head>
<body>
  <h1>jQuery append() and appendTo example</h1>

  <div class="box">I'm a big box</div>
  
  <div class="box">I'm a big box 2</div>
  
  <p>
  <button id="append">append()</button>
  <button id="appendTo">appendTo()</button>
  <button id="reset">reset</button>
  </p>
  
<script type="text/javascript">
	
    $("#append").click(function () {
		
	  $('.box').append("<div class='newbox'>I'm new box by append</div>");
	  
    });
	
	$("#appendTo").click(function () {
		
	  $("<div class='newbox'>I'm new box by appendTo</div>").appendTo('.box');
	  
    });
	
	$("#reset").click(function () {
	  location.reload();
    });
	
</script>
</body>
</html>