为select动态添加option问题

题记：今天为个项目做两个多选列表框互相移动案例，要求支持包括FF,IE,Safari(苹果)在内的浏览器使用。

问题：

现象一，用方法objSelect.appendChild(objOpiton)给select添加option时，添加有出现列表项，但是显示空白，IE下的现象。         

 现象二，用objSelect.add(objOpiton)添加option,FF下不支持。

关键代码（由于是日文项目，注释为日文可忽略不看）：

function moveSelected(oSourceSel,oTargetSel)

{

	//valueとtextを格納するキャッシュ配列を作成する

	var arrSelValue = new Array();

	var arrSelText = new Array();

	//当該配列は選択されたoptionsを格納する

	var arrValueTextRelation = new Array();

	var index = 0;//補助的にキャッシュ配列を作成する

	

	//ソースドロップダウンリストでの全てのデータをキャッシュに格納し、valueと選択されたoptionの対応関係を立てる

	for(var i=0; i<oSourceSel.options.length; i++)

	{

		if(oSourceSel.options[i].selected)

		{

			//格納

			arrSelValue[index] = oSourceSel.options[i].value;

			arrSelText[index] = oSourceSel.options[i].text;

			// valueと選択されたoptionの対応関係を立てる

			arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];

			index ++;

		}

	}

	//キャッシュでのデータをターゲットドロップダウンリストに追加して、ソースドロップダウンリストでの該当データを削除する

	for(var i=0; i<arrSelText.length; i++)	

	{

		//追加

		var oOption = document.createElement("option");

	    oTargetSel.appendChild(oOption)

		oOption.text = arrSelText[i];

		oOption.value = arrSelValue[i];



		//ソースドロップダウンリストでの該当データを削除する

		oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);

	}



}

观察以上代码55-59行

现象一代码为：  
    oOption.text = arrSelText[i];
    oOption.value = arrSelValue[i];
    oTargetSel.appendChild(oOption);

现象二出现的代码为：
    oOption.text = arrSelText[i];
    oOption.value = arrSelValue[i];
    oTargetSel.add(oOption);

结论：

现象一中由于IE和FF对DOM的操作有所区别，故而导致IE下显示为空白列表，因为在IE下必须先得到节点后方能为该节点添加子节点或者属性值。

而FF并没有这个约束。

现象二，理由很简单，FF就是不支持add()的方式添加子节点。而IE为add做过特殊的处理，故而可以得到意向的结果。

补充，以上三种代码在safari下均可以正常运行，不错的浏览器，就像他的外表一样有魅力。