Creating Element in jQuery DOM Manipulation (Outside Element)
jQuery after() Method
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!
");
});
jQuery before() method
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!
");
});
jQuery insertAfter() Method
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");
});
jQuery insertBefore() Method
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");
});