How can I add an option in the beginning?

Question

I have html select,

<select id="myselect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

I need to add new option in this select. If I try like this:

$('#myselect').appendTo($('<option>my-option</option>')); 

the my-option have added to the end

<select id="myselect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>my-option</option>
</select>

How can I add an option in the beginning (as first)? Like this:

<select id="myselect">
    <option>my-option</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Answer 1

In POJS you'd use insertBefore(), e.g.

var select = document.getElementById('mySelect');
var opt = new Option('', 'my-option');
select.insertBefore(opt, select.firstChild);

Answer 2

First, you mean append, rather than appendTo. append adds the content of the parameter to the selection; appendTo appends the selection to the element designated in the parameter.

Second, perhaps intuitively, you can use prepend:

$('#myselect').prepend($('<option>my-option</option>')); 

Answer 3

Use prependTo()

$('#myselect').prependTo($('my-option'));//typo? 

You might have meant this

$('#myselect').prepend($('<option>my-option</option>'));  

http://api.jquery.com/prependTo

http://api.jquery.com/prepend/

But your code is actually the other way around. This might be a typo. In any case, the methods available are prepend() and prependTo()