DOM Insertion with jQuery – .append() and .appendTo()

This entry is part 1 of 2 in the series DOM Insertion with jQuery

jQuery makes it really easy to add new stuff to existing DOM elements. There are various methods provided in jQuery to perform different types of insertions. The .append() is one such jQuery method that inserts the specified content to the end of each element in the set of elements matched by the jQuery filter. The content is appended as the last child of the each of element returned by jQuery filter. Our series about jQuery DOM filters tells about various DOM filters and how each of them works.

General Syntax of .append() Method

In jQuery 1.4, there were some enhancements in the method. After the changes, the general syntax of .append() method is

 .append( function(index, html) )

The parameter function(index, html) should return an HTML string, DOM element(/s) or a jQuery object to insert as the last child of all the matched elements.

The .append() method also supports passing multiple arguments as input. The input can be DOM elements, HTML strings, jQuery objects or array of DOM elements. Any number of additional arguments can be passed to the method.

 $('#myDiv').append($newdiv1, [newdiv2, newDiv3]);

The above statement will append all three new Div elements to the end of the element with ID, myDiv. So, the statement is equivalent to writing three separate .append() statements.

Animate by chaining .append()

Like all jQuery methods, the .append() method can also be chained with other jQuery methods. The .append() method can be chained with .fadeIn() to show the new element(/s) with a fadeIn effect.

$("#myDiv").hide().append(data).fadeIn('slow'); 

Difference between .append() and .appendTo()

Both the methods perform the same function. There is only the syntactical difference in the placement of the content and target.

//Statement 1

$('#selector').append('<div class="appendme">Add new Text</div>');

//Statement 2

$('<div class="appendme">Add new Text</div>').appendTo('#selector');

//Statement 3

$('.appendTome').appendTo('#selector');

Both the statements will produce the same result. The div element with class ‘appendme’ will be appended at the end of the element with ID, selector. So, whether you use the .append() statement or .appendTo() statement, in either case, you will get the same result. The third statement will match the selector in the existing DOM and append to the target.

// Output: Statement 1 and Statement 2

<div id="selector">

The content of selector box

<div class="appendme">Add new Text</div>

</div>

// Output: Statement 3

<div class="appendTome">Add new text</div>

<div id="selector">

The content of selector box

<div class="appendTome">Add new Text</div>

</div>

jQuery .append() – Issue on Older Browsers

Using the .append() method on unclosed DOM elements may result in unexpected behavior, primarily on older browsers. Still, it is recommended to use the method with properly formatted HTML.

There are ways to organize the code and logic. The .append() method should not be nested within a loop. An article on Learning jQuery talks about correct use of the function and its impact on the performance.

Series Navigation