How can I add an empty option in a select tag created dynamically?

Question

I'm trying to add an empty <option> at the beginning of select but without success. When I hard code the option it gets ignored by javascript.

Does not work

<select id="pages" style="display:none;" onchange="getPage();">
 <option>select something</option>
  </select>

javascript

  var pages = document.getElementById('pages');
            pages.style.display = 'block';
            for(var i =0; i < response.data.length; i++)
            {
              pages[i] = new Option(response.data[i].name,response.data[i].access_token);
            }

function getPage(){
    var e = document.getElementById("pages");
    var f = e.options[e.selectedIndex].value;    
    alert(f);
}

Answer 1

This solved my problem:

 document.getElementById("pages").insertBefore(new Option('', ''),
 document.getElementById("pages").firstChild);

full implementation

    var pages = document.getElementById('pages');
                pages.style.display = 'block';
                document.getElementById("pages").insertBefore(new Option('', ''), 
                document.getElementById("pages").firstChild);
                for(var i =0; i < response.data.length; i++)
                {
                  pages[i] = new Option(response.data[i].name,response.data[i].access_token);
                }

    function getPage(){
        var e = document.getElementById("pages");
        var f = e.options[e.selectedIndex].value;    
        alert(f);
    }