innerHTMLを使って<SELECT>へ<option>を追加する方法について

質問

はじめまして。

表題の通りなんですが、今<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とかを使った方法だと修正が大掛かりになってしまうので・・・。

回答No.2

BLUEPIXY

#1>コンテンツデータをそのまま書き込みたいんです・・・。なので、Optionも使えないんです。
意味不明。
option の内容にはテキストしか書けないような気がしますが・

補足

う～ん。コンテンツデータと言ったのには語弊がありましたね。
optionの中にテキストを書く、それは間違ってないんですが要は
ある部分にテキスト(HTMLタグを含む)を挿入するような作りに
なっているんです。

なので、オブジェクトを使うわけに行かないんですよ。
説明でもあるようにinnerHTMLやinsertAdjacentHTMLを使うと言う
制約があるわけです。

もちろん不可能では無いのですが、それであればやりようはいくらでも
あって一番簡便に済ますには方法があるのであれば上記の関数を使って<option>を挿入したいと言う事なんですよ。

回答No.1

BLUEPIXY

elem.options[elem.length]=new Option("test1","test1");
elem.options[elem.length]=new Option("test2","test2");
の様に追加したらどうでしょうか

補足

いや、HTMLの文章と言うかコンテンツデータをそのまま書き込みたいんです・・・。なので、Optionも使えないんです。