子要素を全て削除する

[説明]

メソッド できること
document.createElement(' ') HTMLタグを作る
document.createTextNode(' ') テキストを作る nodeValueとして。textContentではない
親要素.appendChild( 変数 ) ノードの子要素の最後に、新たに作ったノードを追加する
親要素.insertBefore(追加したい変数 , 挿入したい場所の後にくる変数) 要素の直前に要素を新たに追加する
親要素.removeChild( 変数 ) 要素を削除する

[実行結果]

子要素を全て削除する例

[ソースコード]

<ul id="family">
	<li>長男</li>	// インデックス[0]	数1
	<li>次男</li>	// インデックス[1]	数2
	<li>三男</li>	// インデックス[2]	数3
</ul>
<input type="button" id="btn" value="子要素の全てを削除する" />

<script type="text/JavaScript">
var btn = document.getElementById('btn');

btn.onclick = function(){
	var del = document.getElementById('family');

	for(var i = del.childNodes.length - 1 ; i > 0 ; i--){ // childNodesの数 iは減っていく
		del.removeChild(del.childNodes[i]);
	}
}
</script>

もしくは
	while(del.firstChild){ // firstChildがある間は...
		del.removeChild(del.firstChild); // firstChildを取り除く
	}
消したい子ノードの親のエレメントをwhileでぐるぐる回して removeChildで子ノードを削除します。

インデックスにもどる