元要素を削除して新しい要素に置き換える replaceChild( new , old )

[説明]

メソッド できること
document.createElement(' ') HTMLタグを作る
document.createTextNode(' ') テキストを作る nodeValueとして。textContentではない
親要素.appendChild( 変数 ) ノードの子要素の最後に、新たに作ったノードを追加する
親要素.insertBefore(追加したい変数 , 挿入したい場所の後にくる変数) 要素の直前に要素を新たに追加する
親要素.removeChild( 変数 ) 要素を削除する
親要素.cloneNode( true か false ) 要素を複製する(trueなら子要素も複製 falseなら自身のみ複製)
親要素.replaceChild( new , old ) 要素を置き換える

[実行結果]

三男を(削除して)長女に置き換える例

[ソースコード]

<ul id="family">
	<li>長男</li>
	<li>次男</li>
	<li>三男</li>
</ul>
<input type="button" id="btn" value="三男を(削除して)長女に置き換える" />

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

btn.onclick = function(){
	var myFamily = document.getElementById('family');
	var sannan = document.getElementsByTagName('li').item(2); // 三男を取得

	/*************************************************
		長女を作成
	**************************************************/
	var newElement = document.createElement('LI'); // 新たに<li>を作成
	var newTextNode = document.createTextNode('長女'); // 新たにnodeValue「長女」を作成
	newElement.appendChild(newTextNode); // <li>に「長女」を追加
	
	/*************************************************
		置き換え
	**************************************************/
	myFamily.appendChild(newElement); // <li>リストの一番最後に「長女」を追加
	myFamily.replaceChild(newElement , sannan); // 「三男」と「長女」を置き換え
	
	btn.disabled = true;
}
</script>

※removeChild(sannan);をしなくても削除される。myFamily.appendChild(newElement);と一旦追加したあとで置き換えている。 

インデックスにもどる