要素を新たに作成・追加する 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);

インデックスにもどる