Popolare una 'select' con elementi inseriti a runtime in Javascript puro

Con Javascript è possibile popolare una select (combobox) dinamicamente e a runtime. Il vantaggio è che non necessariamente gli elementi che compongono le select dovranno essere conosciuti a priori e quindi presenti hardcode nella pagina o prelevati da una tabella di un database. Un caso pratico potrebbe essere quello in cui un utente aggiunge una voce non prevista in un menù, come ad esempio un paese (magari salavata successivamente in Ajax per essere poi sottoposta alla revisione da parte del gestore per un eventuale approvazione) che possa permettergli in questo modo di procedere con l'iscrizione o le operazioni successive, o ancora più semplice recuperare direttamente lato utente, in questo caso da array definiti, gli elementi con cui i campi dovranno essere riempiti in base a scelte precedenti (ad esempio se riempendo un form seleziono un paese, mi appriranno in un'altra select, le città solo di quel determinato paese prelevate dall'opportuno array. Ad oggi è più performante utilizzate la tecnologia Ajax per sopperire a simili esigenze, ma questi sono solo esempi banali da cui poter trarre spunto per sfruttare le potenzialità del Javascript puro).

Di seguito riporto due esempi di codice funzionante dove relativamente nel primo caso troviamo una select che viene popolata recuperando gli elementi da un array (usato così com'è esso viene popolato al caricamento della pagina):

HTML del primo esempio:

<select id="esempio_select_1"></select>

Javascript del primo esempio:

var array_paesi = ['Belgio','Francia','Inghilterra','Italia','Olanda','Spagna'],
esempio_select_1 = document.getElementById('esempio_select_1');

for( paesi in array_paesi ) {
    esempio_select_1.add( new Option( array_paesi[paesi] ) ); 
};

nel secondo invece la select viene riempita con elementi decisi dall'utente:

HTML del secondo esempio:

<input type="text" id="esempio_text_1" />
<input type="button" id="btn_aggiungi" value="aggiungi alla lista" />
<select id="esempio_select_2"></select>

Javascript del secondo esempio:

document.getElementById('btn_aggiungi').onclick = function() {
    esempio_select_2 = document.getElementById('esempio_select_2');
    country_val = document.getElementById('esempio_text_1').value;
    if (country_val != '') {
        esempio_select_2.add(new Option(country_val));
        document.getElementById('esempio_text_1').value='';
    } else {
        alert('Non hai inserito nessun valore.');
    }
}

Per testare direttamente i due script potete avvalervi del JSFiddle che ho creato e che trovate di seguito selezionando il tab "Result":