要素を新たに作成・追加する createElement(' ') createTextNode(' ') appendChild( )

[説明]

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

1. タグを作る。 → 2.nodeValueを作る。 → 3. タグにnodeValueを追加する。 → 4.それを親要素に追加する。

[実行結果]

長男
次男
三男

[ソースコード]

<ul id="family">
	<li>長男</li>
	<li>次男</li>
	<li>三男</li>
</ul>
<input type="button" id="btn" value="HTMLタグを追加する" />
</div>

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

btn.onclick = function(){
	var newElement = document.createElement('LI'); // <li>タグを新たに作成
	var newText = document.createTextNode('四男'); // <li>タグに入れるテキストを作成
	newElement.appendChild(newText); // <li>タグにテキストを追加（空の<li>タグの子要素の最後に追加）createTextNode は NodeValue である。
	
	var tsuika = document.getElementById('family'); // 親要素を取得
	tsuika.appendChild(newElement); // 親要素である<ul>の子要素として、最後に追加する
	
	//btn.disabled = true; // ボタンを使えないようにする処理
}
</script>

※　一気に書くと　document.getElementById('family').appendChild(newElement);

インデックスにもどる