jQuery Add Div To Div Examples

} March 2, 2013 f by Rocky Dev | b Be the first to Comment

Buffer

As the name suggests, it’s fairly simple! We will see how to use jQuery to add div to div. If you have followed my previous articles so far regarding how to add to div, then you definitely want to read this article as it discusses new approaches, tips and tricks and consists of new methods to add an element as entity and not just merely add it’s attributes. Read on to find out more. Examples follow.

How to add div to div using jQuery (and not just its attributes)

I will be sharing multiple examples to adding a div to another div as a single example won’t be enough. I strongly suggest you try the demo first or you will be easily lost as merely reading this text wont help you see behind the scenes. You need to understand how the addition of a div to another div takes places depending upon the syntax used. So we do this in the following ways:

1. Using .append() method - Adds/Append new div to the content of the existing div, towards the end of the content.

2. Using .appendTo() method - Adds/Append new div to the content of the existing div, towards the end of the content.

3. Using .after() method - Adds/Append new div just after the Closing tag of the existing div.

4. Using .insertAfter() method - Adds/Append new div just after the Closing tag of the existing div.

5. Using .before() method - Adds/Append new div just before the Starting tag of the existing div.

6. Using .insertBefore() method - Adds/Append new div just before the Starting tag of the existing div.

Example 1: By using .append() method in jQuery

Using the .append() method adds all of the new div, along with its content “inside the existing div”. This method does NOT overwrite the existing content of the existing div, so you can use it to safely add new data to existing data. The new data along with the container new div tag, will become a part of the existing content and will be placed after the existing content ends.

Usage format: $( target ).append( source );

<div id="my_div">This is my existing div.</div>

<input type="submit" name="sbt_add1" id="sbt_add1" value="Add using append Method">

	$('#sbt_add1').on("click", function(e){		

		//Adds/Appends new div to the content of the existing div, towards the end of the content.
		$('#my_div').append('<div class="new_div">This is NEW div.</div>')		

		e.preventDefault();

	});

<div id="my_div">This is my existing div.</div>

$('#sbt_add1').on("click", function(e){

//Adds/Appends new div to the content of the existing div, towards the end of the content.

$('#my_div').append('<div class="new_div">This is NEW div.</div>')

e.preventDefault();

});

Example 2: By using . appendTo() method in jQuery

Using the .appendTo() method basically “does the same thing as the .append() method”. The only difference is in the syntax used.

Usage format: $( source ).appendTo( target );

<div id="my_div">This is my existing div.</div>

<input type="submit" name="sbt_add1" id="sbt_add1" value="Add using appendTo Method">

	$('#sbt_add2').on("click", function(e){			

		//Adds/Appends new div to the content of the existing div, towards the end of the content.
		$('<div class="new_div">This is NEW div.</div>').appendTo('#my_div').

		e.preventDefault();

	});

<div id="my_div">This is my existing div.</div>

$('#sbt_add2').on("click", function(e){

//Adds/Appends new div to the content of the existing div, towards the end of the content.

$('<div class="new_div">This is NEW div.</div>').appendTo('#my_div').

e.preventDefault();

});

Example 3: By using .after() method in jQuery

Using the .after() method adds all of the new div, along with its content “just after the closing tag of the existing div”. This method does NOT overwrite the existing content of the existing div. The new data along with the container new div tag, will follow the existing div instantly, literally.

Usage format: $( target ).after( source );

<div id="my_div">This is my existing div.</div>

<input type="submit" name="sbt_add1" id="sbt_add1" value="Add using after method">

	$('#sbt_add3').on("click", function(e){		

		//Adds new div just after the Closing tag of the existing div
		$('#my_div').after('<div class="new_div">This is NEW div.</div>');

		e.preventDefault();

	});

<div id="my_div">This is my existing div.</div>

$('#sbt_add3').on("click", function(e){

//Adds new div just after the Closing tag of the existing div

$('#my_div').after('<div class="new_div">This is NEW div.</div>');

e.preventDefault();

});

Example 4: By using .insertAfter() method in jQuery

Using the .insertAfter() method basically “does the same thing as the .after() method”. The only difference is in the syntax used.

Usage format: $( source ).insertAfter ( target );

<div id="my_div">This is my existing div.</div>

<input type="submit" name="sbt_add1" id="sbt_add1" value="Add using insertAfter method">

	$('#sbt_add4').on("click", function(e){		

		//Adds new div just after the Closing tag of the existing div
		$('<div class="new_div">This is NEW div.</div>').insertAfter('#my_div');

		e.preventDefault();

	});

<div id="my_div">This is my existing div.</div>

$('#sbt_add4').on("click", function(e){

//Adds new div just after the Closing tag of the existing div

$('<div class="new_div">This is NEW div.</div>').insertAfter('#my_div');

e.preventDefault();

});

Example 5: By using .before() method in jQuery

Using the .before() method adds all of the new div, along with its content “just before the opening tag of the existing div”. This method does NOT overwrite the existing content of the existing div. The new data along with the container new div tag, will appear before the existing div & the existing div will follow the new div instantly, literally.

Usage format: $( target ).before( source );

<div id="my_div">This is my existing div.</div>

<input type="submit" name="sbt_add1" id="sbt_add1" value="Add using beforeMethod">

	$('#sbt_add5').on("click", function(e){		

		//Adds new div just before the Starting tag of the existing div
		$('#my_div').before('<div class="new_div">This is NEW div.</div>');

		e.preventDefault();

	});

<div id="my_div">This is my existing div.</div>

$('#sbt_add5').on("click", function(e){

//Adds new div just before the Starting tag of the existing div

$('#my_div').before('<div class="new_div">This is NEW div.</div>');

e.preventDefault();

});

Example 6: By using .insertBefore() method in jQuery

Using the .insertBefore() method basically “does the same thing as the .before() method”. The only difference is in the syntax used.

Usage format: $( source ).insertBefore( target );

<div id="my_div">This is my existing div.</div>

<input type="submit" name="sbt_add1" id="sbt_add1" value="Add using insertBefore Method">

	$('#sbt_add6').on("click", function(e){		

		//Adds new div just before the Starting tag of the existing div
		$('<div class="new_div">This is NEW div.</div>').insertBefore('#my_div');

		e.preventDefault();

	});

<div id="my_div">This is my existing div.</div>

$('#sbt_add6').on("click", function(e){

//Adds new div just before the Starting tag of the existing div

$('<div class="new_div">This is NEW div.</div>').insertBefore('#my_div');

e.preventDefault();

});

Conclusion:

Which of the above methods is best for adding a div to another div using jQuery? Well, that totally depends upon whether you want the new div to be a part of the existing div or not.

If you want the new div to be a part of the existing div, then you can choose between using .append(), .appendTo, .insert(), .insertAfter() methods. You can use whatever method you find convenient.

If you do not want the new div (along with its data) to be a part of the existing div, then go for .before(), .insertBefore() methods. Both of these methods achieve the same result. They only vary in the syntax used.

That’s it!

Do you know of any other ways to use jQuery to add div to div? Feel free to share by leaving a comment below.

Like this Article? Spread the word by sharing it!

j Like This Article? Spread The Word!

Buffer

a You May Also Like

jQuery Check If Div Is Empty Examples
K Continue Reading E Preview w Try Demo

jQuery Check If Div Is Empty Examples
When working with Divs and jQuery, there might have been a situation when you needed to know dynamically if any given div contains any content at all or not. Based upon this, you might want to trigger an action. So in this article, I am going to share easy ways to find out if a Div is empty or not by means of easy to follow examples. Check out the Demo to see how it works in real time. How To Check If Div Is Empty Using …
w Try Demo K Continue Reading
jQuery Change Select Options Examples
K Continue Reading E Preview w Try Demo

jQuery Change Select Options Examples
Form element manipulation using jQuery can be of immense help when working with forms. As such, it is desirable to know if the options of a select dropdown list can be changed or not. Well, the answer is yes! We can dynamically change the options of a select dropdown. We can remove existing options (if any) and then add new options dynamically. So this article covers the simple ways in which we can change or refresh the options of a select list using jQuery. How To …
w Try Demo K Continue Reading
jQuery Find Value In Array Examples
K Continue Reading E Preview w Try Demo

jQuery Find Value In Array Examples
Talking about arrays in jQuery, it can be really helpful to know if a value exists in an array or not. That said, in this article, I am going to share examples on how to find if a specific value exists in an array or not using jQuery. Try the demo to see how it works in real time. How To Find If A Value Exists In Array Or Not Using jQuery Let's assume that we have an array of fruits. Now we would like to search …
w Try Demo K Continue Reading

m Never Miss A Post

We will send you FREE periodical updates whenever we publish a new article so that you can remain on top of technology. We will NEVER send unsolicited email. That’s our GUARANTEE !!!

The above article has the following Categories and Tags applied to it:

B Categories: jQuery, Tips and Tricks

J Tags: jquery-demos 126 jquery-snippets 56 jquery-tips 169

f About Author: Rocky Dev

Founder of Extreme Web Designs and currently works as Web Designer, Web Developer, Blogger and as an Editor. He is the brains behind the Extreme Web Designs Labs, a one-stop growing resource for Free Web Design & Web Development tools that help increase productivity and cut down on web design & development time. Connect with Rocky Dev on G+ and follow him on Twitter.