jQuery appendTo Examples
Using jQuery appendTo method, you can easily add content, dynamic or static. This is immensely helpful with inserting dynamic content in a div or any other element. In this article, I am going to share info on the appendTo() method along with easy to follow examples.
How to use jQuery appendTo method
Here’s a simple example to use the appendTo() method. This example assumes that we have 2 main divs with class “red” & “green” applied to them & these divs are held in another “container” div for easy manipulation. So what we are going to do is have 2 individual buttons that will let you appendTo the red div to green div and vice-versa. We also have another button that will reset the divs back to their original state, once the jquery appendTo method has been used on them dynamically.
Example for .appendTo() method:
Here is the complete source code:
<html>
<head>
<title>jjQuer .appendTo() method Examples</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.red {
background-color: #FFA6A6;
border: 1px solid red;
margin: 10px;
}
.green {
background-color: #CEFFCE;
border: 1px solid green;
margin: 10px;
}
</style>
</head>
<body>
<div class="divs_container">
<div id="mydiv1" class="red">This is my 1 div</div>
<div id="mydiv2" class="green">This is my 2 div</div>
</div>
<input type="button" name="sbt_append_g2r" id="sbt_append_g2r" value="Append Green Div to Red">
<input type="submit" name="sbt_remove" id="sbt_remove" value="Unappend/Remove">
<input type="button" name="sbt_append_r2g" id="sbt_append_r2g" value="Append Red Div to Green">
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var divs_container_html = $(".divs_container").html();
//Append Green Div to Red
$('#sbt_append_g2r').on("click", function(){
$('.green').appendTo($('.red'));
});
//Append Red Div to Green
$('#sbt_append_r2g').on("click", function(){
$('.red').appendTo($('.green'));
});
//Reset the divs back to their original state
$('#sbt_remove').on("click", function(){
$(".divs_container").html(divs_container_html);
});
});
</script>
</body>
</html>Difference between jquery .append() and jquery .appendTo()
In jQuery, the .append() and .appendTo() methods have the same functioanlity. However, the main difference lies in the syntax. To be more precise, the syntax varies, in the placement of the content and target. Here’s an easy represenatation for your understanding:
Using .append();
$(target).append(new_content);
Using .appendTo();
$(new_content).appendTo(target);
Where the new_content can be a div, an image, HTML content, etc. If you would like a technical explanation of the above, here it is:
When .append() is used, the container into which the content is inserted appears before the method.
When .appendTo() is used, the container into which the content is inserted appears after the method.
That’s it for now!
Do you know of any other ways to use .appendTo() method using jQuery? Feel free to suggest by commenting below.