DOM Traversal Methods

DOM Manipulation Methods
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
The two s, with a little CSS, are rendered on the right side of the page
as follows:
We can insert an HTML structure before like so:
$('div.demo-box').before('This text
was inserted');
The new and elements, as well as the text nodes, are created on
the fly and added to the DOM. The result is a new positioned outside of, just
before, :
[ 82 ]