jquery - How to populate dropdown/select/combobox dynamically?

I am trying to add a drop down in a div dynamically[jQuery] but its not working. I want following structure:

<select id="surah_selection" style="position:relative; top:10px; left:25px"> 
      <option id="1">Select Surah</option> 
      <option id="2" >Al-Baqra</option>
      <option id="3">Al-Fatiha</option>
      <option id="4">Al-noor</option>
      <option id="5">Al-Tobah</option>
</select>  <!--Surah selection ends -->

I have read this but it did not work.

Here is what I've tried:

$('#book_selection').change(function(){
    alert("changed");
    var option = document.createElement("option");
    option.text = 'df';
    option.value = 'df';
    var temp = document.createElement('select');
    temp.appendChild(option);
    var root = document.getElementById('book_selection');
    root.appendChild(temp);
    alert("done");
});