All of the methods in this article by Karl Swedberg and Jonathan Chaffer, authors of jQuery 1.4 Reference Guide, manipulate the DOM in some manner. In a previous article we saw methods that simply change one of the attributes of an element, while others set an element's style properties. In this article we cover methods for DOM insertion—inside, outside, and around. These methods allow us to insert new content inside and outside an existing element, and also surrounding existing content.

DOM insertion, inside

These methods allow us to insert new content inside an existing element.

.prepend()

Insert content specified by the parameter at the beginning of each element in the set of matched elements.

.prepend(content)
.prepend(function)

Parameters (first version)

• content: An element, an HTML string, or a jQuery object to insert at the beginning of each element in the set of matched elements

Parameters (second version)

• function: A function that returns an HTML string to insert at the beginning of each element in the set of matched elements

Return value

The jQuery object, for chaining purposes.

Description

The .prepend() and .prependTo() methods perform the same task. The major difference is in the syntax, specifically in the placement of the content and target. With .prepend(), the selector expression preceding the method is the container into which the content is inserted. With .prependTo(), on the other hand, the content precedes the method either as a selector expression or as markup created on the fly. It is then inserted into the target container.

Consider the following HTML code:

<h2>Greetings</h2>
 <div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
</div>

We can create content and insert it into several elements at once.

$('.inner').prepend('<p>Test</p>');

Each <div class="inner"> element gets the following new content:

<h2>Greetings</h2>
 <div class="container">
 <div class="inner">
 <p>Test</p>
 Hello
 </div>
 <div class="inner">
 <p>Test</p>
 Goodbye
 </div>
</div>

We can also select an element on the page and insert it into another:

$('.container').prepend($('h2'));

If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned).

<div class="container">
 <h2>Greetings</h2>
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
</div>

However, if there are more than one target elements, cloned copies of the inserted elements will be created for each target after the first.

.prependTo()

Insert every element in the set of matched elements at the beginning of the target.

.prependTo(target)

Parameters

• target: A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted at the beginning of the element(s) specified by this parameter

Return value

The jQuery object, for chaining purposes.

Description

The .prepend() and .prependTo() methods perform the same task. The major difference is in the syntax, specifically in the placement of the content and target. With .prepend(), the selector expression preceding the method is the container into which the content is inserted. With .prependTo(), on the other hand, the content precedes the method either as a selector expression or as markup created on the fly, and is inserted into the target container.

Consider the following HTML code:

<h2>Greetings</h2>
 <div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
</div>

We can create content and insert it into several elements at once.

$('<p>Test</p>').prependTo('.inner');

Each inner <div> element gets the following new content:

<h2>Greetings</h2>
<div class="container">
 <div class="inner">
 <p>Test</p>
 Hello
 </div>
 <div class="inner">
 <p>Test</p>
 Goodbye
 </div>
</div>

We can also select an element on the page and insert it into another.

$('h2').prependTo($('.container'));

If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned).

<div class="container">
 <h2>Greetings</h2>
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
</div>

However, if there are more than one target elements, cloned copies of the inserted elements will be created for each target after the first.

.append()

Insert content specified by the parameter at the end of each element in the set of matched elements.

.append(content)
.append(function)

Parameters (first version)

• content: An element, an HTML string, or a jQuery object to insert at the end of each element in the set of matched elements

Parameters (second version)

• function: A function that returns an HTML string to insert at the end of each element in the set of matched elements

Return value

The jQuery object, for chaining purposes.

Description

The .append() and .appendTo() methods perform the same task. The major difference is in the syntax, specifically in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method either as a selector expression or as markup created on the fly, and is inserted into the target container.

Consider the following HTML code:

<h2>Greetings</h2>
<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
</div>

We can create content and insert it into several elements at once.

$('.inner').append('<p>Test</p>');

Each inner <div> element gets the following new content:

<h2>Greetings</h2>
<div class="container">
 <div class="inner">
 Hello
 <p>Test</p>
 </div>
 <div class="inner">
 Goodbye
 <p>Test</p>
 </div>
</div>

We can also select an element on the page and insert it into another.

$('.container').append($('h2'));

If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned).

<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
 <h2>Greetings</h2>
</div>

However, if there is more than one target element, cloned copies of the inserted elements will be created for each target after the first.

.appendTo()

Insert every element in the set of matched elements at the end of the target.

.appendTo(target)

Parameters

• target: A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted at the end of the element(s) specified by this parameter

Return value

The jQuery object, for chaining purposes.

Description

The .append() and .appendTo() methods perform the same task. The major difference is in the syntax, specifically in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method either as a selector expression or as markup created on the fly, and is inserted into the target container.

Consider the following HTML code:

<h2>Greetings</h2>
<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
</div>

We can create content and insert it into several elements at once.

$('<p>Test</p>').appendTo('.inner');

Each inner <div> element gets the following new content:

<h2>Greetings</h2>
 <div class="container">
 <div class="inner">
 Hello
 <p>Test</p>
 </div>
 <div class="inner">
 Goodbye
 <p>Test</p>
 </div>
</div>

We can also select an element on the page and insert it into another.

$('h2').append($('.container'));

If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned).

<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
 <h2>Greetings</h2>
</div>

However, if there are more than one target elements, cloned copies of the inserted elements will be created for each target after the first.