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:
<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:
// 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:
<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:
// 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:
$('<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
$('<li class="lang">JavaScript</li>').insertAfter('li.lang:last');