How to add the text "Choose a Category" to jquery drop-down menu -

as stands first selection apple, first selection should text "choose category". how insert jquery script, using jquery insert it-not html?

here jquery in question trying insert text into:

jquery(document).ready(function ($) {     $('#sub_listing_categories ul').each(function () {         var list = $(this),             select = $(document.createelement('select')).insertbefore($(this).hide()).change(function () {                 window.location.href = $(this).val();             });         $('>li a', this).each(function () {             var option = $(document.createelement('option'))                 .appendto(select)                 .val(this.href)                 .html($(this).html());             if ($(this).attr('class') === 'selected') {                 option.attr('selected', 'selected');             }         });         list.remove();     }); }); 

the html this:

<div id="sub_listing_categories">     <ul>         <li class="cat-item"><a href="#">apple</a>          </li>         <li class="cat-item"><a href="#">orange</a>          </li>         <li class="cat-item"><a href="#">pear</a>          </li>     </ul> </div> 

you can add .append('<option>choose category</option>'):

jquery(document).ready(function ($) {      $('#sub_listing_categories ul').each(function () {          var list = $(this),              select = $('<select>').append('<option>choose category</option>').insertbefore($(this).hide()).change(function () {                  window.location.href = $(this).val();              });          $('>li a', this).each(function () {              var option = $('<option>')                  .appendto(select)                  .val(this.href)                  .html($(this).html());              if ($(this).attr('class') === 'selected') {                  option.attr('selected', 'selected');              }          });          list.remove();      });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="sub_listing_categories">      <ul>          <li class="cat-item"><a href="#">apple</a>            </li>          <li class="cat-item"><a href="#">orange</a>            </li>          <li class="cat-item"><a href="#">pear</a>            </li>      </ul>  </div>

note made couple of other minor changes document.createelement('select') $('<select>')