dom sample

appendChild()、replaceChild()、removeChild()の動作確認のためのサンプル(FireFoxでの動作するように改造)

1つ前のサンプルをFireFoxでも動作するように改造した。まず、フォームの値の取り方を次に変更した。

var data = document.getElementById("myInput")

この場合、dataはノードを参照することになる。次に、テキストノードを生成するのに

createTextNode(data.value)

とした。ソース参照。

実行結果

これは最初の文字です。

source


[head]

<script languag="javascript">

function myAppend()	{
	var data = document.getElementById("myInput");	//フォームの値（文字列）を取得
	var disp = document.getElementById("myArea");
	var elem = document.createTextNode(data.value);	//createTextNode()で文字列からテキストノードを生成
	disp.appendChild(elem);
}

function myReplace()	{
	var data = document.getElementById("myInput");	//フォームの値（文字列）を取得
	var disp = document.getElementById("myArea");
	var elem = document.createTextNode(data.value);	//createTextNode()で文字列からテキストノードを生成
	disp.replaceChild(elem,disp.firstChild);
}

function myRemove()	{
	var disp = document.getElementById("myArea");
	disp.removeChild(disp.firstChild);	//removeChild()でmyAreaの子ノードを削除
}

</script>

[body]

<form id="myForm">
<input id="myInput" type="text" value="こんにちは"></br>
<input id="myButton" type="button" value="appendChild()" onclick="myAppend()">
<input id="myButton" type="button" value="replaceChild()" onclick="myReplace()">
<input id="myButton" type="button" value="removeChild()" onclick="myRemove()">
</form>
<div id="myArea" style="border:1px solid silver;">
これは最初の文字です。
</div>