Adding Child elements in jQuery

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

JavaScript

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');