要素の直前に要素を新たに追加する insertBefore( )

[説明]

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

[実行結果]

次男の前に長女を入れる例

長男
次男
三男

[ソースコード]

<ul id="family">
	<li>長男</li>
	<li>次男</li>
	<li>三男</li>
</ul>
<input type="button" id="btn" value="次男の前に長女を追加する" />
</div>

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

btn.onclick = function(){
	var newElement = document.createElement('LI');  // タグ<li>を作成
	var daughter = document.createTextNode('長女'); // <li>タグに入れるテキストを作成
	newElement.appendChild(daughter); // <li>タグにテキストを追加（空の<li>タグの子要素の最後に追加）createTextNode は NodeValue である。
	
	var refChild = document.getElementsByTagName('li').item(1); // 挿入したい場所の後にくる要素を取得
	var parent = document.getElementById('family'); // 親ノードを取得
	parent.insertBefore(newElement , refChild);
}
</script>

※一気に書くと　document.getElementById('family').insertBefore(newElement , refChild);
親ノードのfamilyに対してinsertBeforeしている点に注意。並び方はappendChildと同じだが、引数が2つであるところが異なる。

インデックスにもどる