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 Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
Thanks. This article help me so much!
After refreshing the page the content will be cleared, how to avoid that.
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.
Who does’nt love Jquery!
Any way huge thanks for a great article.
Argan Olie
exactly what i have been looking thankx very much
If they are same then why two functions for same thing?
Is there anything notable
Thank you very much for this article!
Looking forward to read more posts.
Cheers to JQuery (-:
Thanks for this article
But to me its still not clear why there are both those functions avalible in JQuery? Care to explain?
The first one works even if the child is a Javascript object.
The second one works even if the parent is a Javascript object.
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