【JavaScript】 DOM：要素の複製 cloneNode
2007.05.07 Author: たわばがに
ということで、今回はJavaScriptのDOMスクリプティングネタです。
以前、さらりと appendChild や removeChild に関しては取り上げた気がするので、
今回は要素の複製に使う cloneNode について書いてみました。
まずは毎度おなじみということで、以下のようなサンプルを作ってみました。
これを実際にセットしてみました。
↓のボタンをクリックすると、画像（正確には、divとimg）が複製され、表示されます。
クリックする度に画像が一つづつ増えていきます。
以下、スクリプトの説明。
cloneNode で id が template01 の要素(今回の場合はdiv)を複製し、
更にその id と style(display属性) を変更してから appendChild で表示(タグの追加)させています。
なお、cloneNode で指定している引数(今回はtrue)によって、
複製する要素の子要素を引き継ぐか否かを判別します。
子要素がいらない場合はfalseをセットします。
で、結局この cloneNode は何のために使うのか？
という疑問が浮かぶと思います。
おそらく、 cleateElement を使って実際に要素(タグ)生成を行ってみると分かりますが、
一から要素を構築していくのは結構面倒です。
特に複雑かつ同じ構成の要素を並べたい場合は、スクリプトが無駄に長くなるだけです。
そんな時などに cloneNode が重宝するはずです。
以上、偏ったDOMネタでした。(久々にサクッと終わった)
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
以前、さらりと appendChild や removeChild に関しては取り上げた気がするので、
今回は要素の複製に使う cloneNode について書いてみました。
まずは毎度おなじみということで、以下のようなサンプルを作ってみました。
<script type="text/javascript">
<!--
var count = 0;
function hoge() {
// クローン生成
tpl = document.getElementById('template01');
clone = tpl.cloneNode(true);
// idとdisplayの設定
clone.id = "dispData_" + count;
clone.style.display = "inline";
// 表示
base = document.getElementById('display_area')
base.appendChild(clone);
// カウンタアップ
count++;
}
//-->
</script>
<div id="template01" style="display:none;">
<img src="http://shain.blog.conextivo.com/images/js/human_b.gif">
</div>
<div id="display_area"></div>
<input type="button" value="画像を複製して表示" onClick="hoge()">
これを実際にセットしてみました。
↓のボタンをクリックすると、画像（正確には、divとimg）が複製され、表示されます。
クリックする度に画像が一つづつ増えていきます。
以下、スクリプトの説明。
cloneNode で id が template01 の要素(今回の場合はdiv)を複製し、
更にその id と style(display属性) を変更してから appendChild で表示(タグの追加)させています。
なお、cloneNode で指定している引数(今回はtrue)によって、
複製する要素の子要素を引き継ぐか否かを判別します。
子要素がいらない場合はfalseをセットします。
で、結局この cloneNode は何のために使うのか？
という疑問が浮かぶと思います。
おそらく、 cleateElement を使って実際に要素(タグ)生成を行ってみると分かりますが、
一から要素を構築していくのは結構面倒です。
特に複雑かつ同じ構成の要素を並べたい場合は、スクリプトが無駄に長くなるだけです。
そんな時などに cloneNode が重宝するはずです。
以上、偏ったDOMネタでした。(久々にサクッと終わった)
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
