jQuery append – Insert Element at End of Another Element

We can use the jQuery append method to place an element in the last index spot of another element.

$("#div1").append($("#div2"));

Let’s say I have the following HTML:

  
This is paragraph 1
  
This is paragraph 2
  
This is paragraph 3

If we want to move paragraph 1 after paragraph 3, then we can use the jQuery append() method to do this with the following JavaScript code.

$("#div1").append($(".p1"));

The result would be as follows:

This is paragraph 2
This is paragraph 3
This is paragraph 1

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery("#div1").append(jQuery(".p1"));

The append method is also very similar to the jQuery appendTo() method, it’s main difference just being a syntax one. But both can accomplish the same thing.

Using the append() Method to insert HTML into a DIV

We can also use the append() method to insert HTML into the end of a div. Take the following HTML:

  
This is paragraph 1
  
This is paragraph 2
  
This is paragraph 3

Say we wanted to add a new paragraph to #div1, right below class “p3”. We can use the append() method to do this.

$("#div1").append($('
This is paragraph 4
'));

The result would be as follows:

This is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4

Using the append() Method to Move An Element After Another With a Click

We can use the jQuery append() method to move an element after all other elements of their parent element.

Let’s say we have the following HTML code and we want to give the user the ability to move paragraph 2 to the bottom.

  
This is paragraph 1
  
This is paragraph 2
  
This is paragraph 3
  
This is paragraph 4

Move Paragraph 2

We can utilize both the jQuery click() method and jQuery append() method to move paragraph 2 to the bottom.

Below is the JavaScript code which will use the jQuery append method to move paragraph 2 after all the other paragraphs of #div1.

$("#click-me").click(function(){
  $("#div1").append($(".p2"));
}); 

The final code and output for this example is below:

Code Output:

Full Code:

  
This is paragraph 1
  
This is paragraph 2
  
This is paragraph 3
  
This is paragraph 4

Move Paragraph 2