DOM Traversal Methods

[ 83 ]
Chapter 4
An element (or array of elements) that already exists on the page could be moved to
the DOM position just before as well. The following code,
for example, moves the document's first paragraph by using a jQuery object:
$('div.demo-box').before( $('p:eq(0)') );
.insertBefore()
Inserts every element in the set of matched elements before the set of elements
specified in the parameter.
.insertBefore(content)
Parameters
•
content: A selector or element before which the matched set of elements will
be inserted
Return Value
The jQuery object, for chaining purposes.
Description
The .before and .insertBefore methods perform the same task. The only
difference is in the syntax—specifically, in the placement of the content and target.
With .before(), the selector expression preceding the method is the container into
which the content is inserted. With .insertBefore(), on the other hand, the content
precedes the method, either as a selector expression or as markup created on the fly,
and it is inserted before the target container.
Consider the following HTML:
Demonstration Box