innerHTMLを使って<SELECT>へ<option>を追加する方法について - その他([技術者向] コンピューター) - 教えて！goo

はじめまして。

表題の通りなんですが、今<SELECT>タグ内に<option>タグをinnerHTMLもしくはinsertAdjacentHTMLを使って追加しようと考えています。
ところが、なぜかどちらを使った場合にも一番初めの<option>タグが消されてしまいます。

<select id=insertion>
<option>---------------</option>
</select>
↓
<select id=insertion>
---------------</option><option>test1</option>
<option>test2</option>
</select>

となってしまうのです。スクリプトは以下のようなものを使っています。

function insertion(elementId)
{
elem = document.getElementById(elementId);
elem.innerHTML += '<option>test1</option><option>test2</option>';
}

環境はWindowsXP、IE6.0です。単純にIE6.0のバグのような気もしないでもないんですが・・・。

ちなみに、innerHTMLもしくはinsertAdjacentHTMLを使う以外の方法例えばappendChildとかは使えません。というのも、prototype.jsを使ってAjax.Updaterを使ってリストボックスの自動生成を考えているのですが、Ajax.Updaterがフィールドの置換に使っているメソッドがinnerHTMLかinsertAdjacentHTMLな為、appendChildとかを使った方法だと修正が大掛かりになってしまうので・・・。