title: Jquery appending HTML at index 1 in select box?
body: <p><strong>selectBox HTML</strong></p>
  
  <pre><code>&lt;select id="customerBox" onchange="customerOperation(this);"&gt;
      &lt;option value="-1"  &gt; Select&lt;/option&gt;
      &lt;option value="delete"  class="delete-operation"&gt; Delete &lt;/option&gt;
      &lt;option value="add" class="add-operation"&gt; Add &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I have two links  i.e link1 and link2. </p>
  
  <p>On click of link1 , i need to remove the delete option<br>
  On click of link2 , need to attach it again</p>
  
  <p>on click of link 1 i am detaching the html like below</p>
  
  <pre><code> var deleteOptionHtml = $("#customerBox option[class=delete-operation]").detach();
  </code></pre>
  
  <p>on click of link 2 i am reattaching the html like below</p>
  
  <pre><code>  $("#customerBox").append(deleteOptionHtml);
  </code></pre>
  
  <p>Everything workfine but  delete option gets appended after Add and i see the options order as <code>Select,Add, Delete</code> instead of <code>Select,Delete,Add</code>.
  Is there a way i can append the  html(delete option) at the 1 index </p>
  
  <p><strong>Note:-</strong> I am not using jquery show/hide function becoz thats does  not work in browser like IE/chrome. </p>