Hello Readers,

If we want to insert any element or content within define particular element using jQuery, then we can use jQuery .append() or .appendTo() method.

jQuery .append() and .appendTo() both methods are doing the similar task, add a html content or element after the content of the matched elements.

Example:

<div class="block">I'm a big block</div>
<div class="block">I'm a big block 2</div>

Here we can see the major difference in the following syntax.

Syntax 1 for .append() method: $(selector).append(new text);

$('.block').append("<div class="newbox">I'm new block by prepend</div>"); 

Syntax 2 for .appendTo() method: $(new text).appendTo(selector);

$("<div class="newbox">I'm new block by appendTo</div>").appendTo('.block');

The result will be for the both methods:

Jquery .append and .appendTo() Both methods above are doing the similar task, but with different syntax, the new contents after .append() or .appendTo() will become:

<div class="block">
   I'm a big block
   <div class="newbox">I'm new block by prepend</div>
</div>
<div class="block">
   I'm a big block 2
   <div class="newbox">I'm new block by prepend</div>
</div>

Thanks