If the wrap method deals with parent elements, and the append/prepend methods deal with child elements, then the before/after/insertBefore/insertAfter.
before method
The method beforeinserts a new element before each element in the selection. It has the following uses:
- before(‘html markup’): adds an element generated from html markup to the markup before each selection element
- before(element): adds an html element passed as a parameter to the markup before each selection element
- before(jQuery): adds to the markup before each selection element in the jQuery object
- before(function): adds to the markup before each element of the selection the object returned by the function
Let’s say we have the following list:
1 2 3 4 5 | < ul > < li class = "lang" >Java</ li > < li class = "lang" >C/C++</ li > < li class = "lang" >PHP</ li > </ ul > |
Using the before method, we can add a new list element to the beginning:
1 2 3 4 5 6 7 | // adding with markup code $( 'li.lang' ).first().before( '<li class="lang">JavaScript</li>' ); // adding a new html element var vbItem = document.createElement( 'li' ); vbItem.innerHTML= 'Visual Basic' ; $( 'li.lang' ).first().before(vbItem); |
After adding new elements will be at the beginning of the list:
1 2 3 4 5 6 7 | < ul > < li class = "lang" >Visual Basic</ li > < li class = "lang" >JavaScript</ li > < li class = "lang" >Java</ li > < li class = "lang" >C/C++</ li > < li class = "lang" >PHP</ li > </ ul > |
after method
The method works in a similar way after, except that the addition goes to the end of the list.
- after(‘html markup’): adds after each selection element an element created from html markup
- after(element): adds an html element passed as a parameter after each selection element
- after(jQuery): adds after each selection element to the jQuery object
- after(function): adds after each element of the selection the object returned by the function
‘s take the previous list example and add a couple of items to it:
1 2 3 4 5 | // adding with markup code $( 'li.lang' ).last().after( '<li class="lang">JavaScript</li>' ); // Adding a jQuery object by cloning the last element $( 'li.lang' ).last().after($( 'li.lang' ).last().clone().html( 'Visual Basic' )); |
insertBefore method
The method insertBeforeis similar in its action to the before method, only as a parameter it takes the element before which the addition will occur. It has the following syntax:
- insertBefore(‘html markup’): the element is added before the element generated from the html markup
- insertBefore(element): the element is added before the html element that is passed as a parameter
- insertBefore(jQuery): the element is added before the jQuery object
- insertBefore(‘selector’): the element is added before the object that matches the selector
It’s basically the same before method, only here the jQuery object and the element being pasted are reversed:
1 | $( '<li class="lang">JavaScript</li>' ).insertBefore( 'li.lang:first' ); |
Here the element
will be added before the element that matches the selector li.lang:first
insertAfter method
The method insertAfteris similar to the after method, only, like the insertBefore method, it takes as a parameter the element after which the addition will occur. It has the following use cases:
- insertAfter(‘html markup’): the element is added after the element generated from the html markup
- insertAfter(element): the element is added after the html element that is passed as a parameter
- insertAfter(jQuery): the element is added after the jQuery object
- insertAfter(‘selector’): the element is added after the element that matches the selector
1 | $( '<li class="lang">JavaScript</li>' ).insertAfter( 'li.lang:last' ); |