Add an option to a select element in second place

Question

I search to know how place a new select element at the second place of a select list

The hierarchy:

• first : white element
• second : my new element (there : Add)
• next : my email list

My function :

function classAppend(){
    $('#email').append(
        $('<option></option>').val('').addClass('new_address_mail').html("Add")
    );
}

Some one know what is the option?

Answer 1

Try this:

$('#email option:first').after($('<option />', { "value": '', text: 'My new option', class: 'new_address_mail' }));

Answer 2

You probably have to select the first child of #email and insert your element with insertAfter:

$('<option></option>')
   .val('')
   .addClass('new_address_mail')
   .html("Add")
   .insertAfter($('#email').children().first());

Answer 3

$("<option value='x'>newly added</option>").insertAfter($("select option:first"));​

DEMO