appendChild()、replaceChild()、removeChild()の動作確認のためのサンプル

フォームの文字列を変数に入れたあと、各メソッドを実行している。各メソッドの使い方は次のとおり。

ノード.appendChild(新しい子ノード)
ノード.replaceChild(新しい子ノード.古い子ノード)
ノード.removeChild(古い子ノード)

実行結果

source

[head]

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

function myReplace()	{
	var data = myForm.myInput.value;	//フォームの値（文字列）を取得
	var disp = document.getElementById("myArea");
	var elem = document.createTextNode(data);	//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>