jQuery Add Div To Div Examples

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();

	});

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();

	});

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();

	});

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();

	});

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();

	});

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();

	});

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.