DOM Insertion with jQuery – .prepend() and .prependTo() Methods

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

There are various options to insert new DOM elements using jQuery. In the first post of the DOM Insertion series, we read about .append() and .appendTo() methods. The two methods add the new DOM element as the last child of the DOM elements matched by jQuery filter. The two methods produce same results, but differ syntactically.

While the .append() and .appendTo() methods insert the new elements at the end of the selected DOM elements, there can be a requirement to add new element at the start of the selected DOM element. jQuery has methods to complement append methods. The methods are aptly named .prepend() and .prependTo().

The .prepend() method inserts the specified content to the start of each element in the set of elements matched by the jQuery filter. The content is appended as the first child of the each of element returned by jQuery filter. For understanding various jQuery filters, you may read our jQuery DOM filters series.

General Syntax of .prepend() Method

Similar to .append() method, the .prepend() method was also improved in jQuery 1.4. After the changes, the general syntax of .prepend() method is

.prepend(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 .prepend() 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').prepend($newdiv1, [newdiv2, newDiv3]);

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

General Syntax of .prependTo() Method

The .prependTo() method accepts the target element to which the new element is to be prepended.

.prependTo(target)

where target is a selector, DOM element, HTML string, or a jQuery object. The matched elements will be inserted at the beginning of the element(/s) specified by the target parameter.

Animate by chaining .prepend()

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

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

Difference between .prepend() and .prependTo()

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

// Statement 1

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

// Statement 2

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

// Statement 3

$('.prependTome').prependTo('#selector');

First two statements will produce the same result. The div element with class ‘prependme’ will be prepended at the start of the element with ID, selector. So, whether you use the .prepend() statement or .prependTo() statement, you will get same results. The third statement will match the elements from existing DOM and prepend to the target.

// Output: Statement 1 and Statement 2

<div id="selector">

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

The content of selector box</div>

// Output: Statement 3

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

<div id="selector">

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

The content of selector box

</div>

Next week, we will continue with the series of DOM Insertion methods.

Series Navigation