In jQuery, how do you add markup above your selected DOM element?

Question

If i have:

<div id="test"></div>

How do I select the test div and then add <div id="pre-test"> before the test div so it looks like this:

<div id="pre-test"><div id="test"></div>

Thanks guys

Answer 1

$("<div id='pre-test'/>").insertBefore("#test");

insertBefore documentation.

Alternatively, you can use the .before(...) method like so:

$("#test").before("<div id='pre-test'/>");

Answer 2

You can use insertBefore (http://api.jquery.com/insertBefore/)

$('<div id="pre-test">').insertBefore($('#test'));

Answer 3

Two ways. You can Either do:

$('#test').before($('#test'));

That would do it, but you can't chain it. A better approach is to use .insertBefore()

$('<div/>', {
   id:  'pre-test'
}).insertBefore($('#test'));

That way, you don't need to re-query the newly created element if you want to apply more methods on it. For instance:

$('<div/>', {
   id:  'pre-test'
}).insertBefore($('#test')).css('background-color', 'red').fadeOut('slow', function(){
    $(this).fadeIn('slow');
});

Ref.: .insert(), .insertBefore()