jQuery append() and appendTo() example

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>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
Sanjay
Guest
Sanjay

After refreshing the page the content will be cleared, how to avoid that.

Mandy
Guest
Mandy

True they are the same but markup can be created on the fly in appendTo which is not the case in append. jQuery API documentation says:

With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

Argan Olie
Guest
Argan Olie

Who does’nt love Jquery!
Any way huge thanks for a great article.

Argan Olie

paul
Guest
paul

exactly what i have been looking thankx very much

Usman
Guest
Usman

If they are same then why two functions for same thing?
Is there anything notable

Alfian Effendy
Guest
Alfian Effendy

Thanks. This article help me so much!

Julie Kavvs
Guest
Julie Kavvs

Thank you very much for this article!
Looking forward to read more posts.

Cheers to JQuery (-:

Tom Frank Christensen
Guest
Tom Frank Christensen

Thanks for this article

But to me its still not clear why there are both those functions avalible in JQuery? Care to explain?

DaveMcW
Guest
DaveMcW

The first one works even if the child is a Javascript object.

The second one works even if the parent is a Javascript object.

CR
Guest
CR

Really appreciate this article. I was having trouble figuring out how to load in content and then unload content while still being able to reuse the content if a link was clicked on again.

The location.reload(); is working for what I need.

Again much appreciated. Looking forward to checking out the rest of the site.

Best,

CR

trackback
Anzahl Textfelder definieren

[…] ich mal noch umzusetzen. Dank Deinem Stichwort "appendTo" hab ich jetzt das gefunden: jQuery append() and appendTo() example. Ist zwar ohne Zahleingabe aber so kann der User die Anzahl Felder die er braucht einfach […]