要素を複製する cloneNode( )

[説明]

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

[実行結果]

リストを複製する例

[ソースコード]

<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 copy = myFamily.cloneNode(true);
	copy.id = 'copyFamily'; // 複製したもののid属性を変更
	document.body.appendChild(copy); // bodyに追加
	
	btn.disabled = true;
}
</script>

※

インデックスにもどる