Creating Element in jQuery DOM Manipulation (Outside Element)

After the selected HTML elements, the after() method inserts the specified content. 

Tip: Use the before() method to insert content before selected elements.

Syntax for after method in jQuery

$(selector).after(content,function(index))

Example of jQuery after() method

After each

element, add content:

$("button").click(function(){
$("p").after("
Hello world!
");
});

The before() method in jQuery adds content to the front (before) of the selected elements.

Syntax of jQuery before method

$(selector).before(content,function(index))

Example of before() method in jQuery

Before each

element, add content:

$("button").click(function(){
$("p").before("
Hello world!
");
});

The insertAfter() method places HTML elements after the ones that have been selected.

Syntax for insertAfter() method in jQuery

$(content).insertAfter(selector

Example of jQuery insertAfter method

After each

element, add a element:

$("button").click(function(){
$("Hello world!").insertAfter("p");
});

The insertBefore() method places HTML elements before the ones that have been chosen.

Syntax of insertBefore() method in jQuery

$(content).insertBefore(selector)

Example of jQuery insertBefore() method

Before each

element, add a element:

$("button").click(function(){
$("Hello world!").insertBefore("p");
});