node.cloneNode( deep )は、「node」に指定したノードを複製するメソッド。引数「deep」に子孫ノードも複製するかどうかを指定できる。
構文
var $cloneNode = $elementNodeReference.cloneNode( deep );
引数
- deep
- 子孫ノードも複製するかどうか。
- 「true」を指定すると、子孫ノードも複製する。
- 「false」を指定すると、子孫ノードは複製しない。
戻り値
複製したノード。
サンプル
複製元リスト
- 項目Ａ
- 項目Ｂ
- 項目Ｃ
- 項目Ｄ
- 項目Ｅ
複製先リスト
サンプルの動作について
複製元リストの「項目Ａ～Ｅ」をクリックすると、複製先リストにクリックした項目を複製する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
var $getListAItems = document.getElementById( "sampleListA" ).children;
for( var $i = 0; $i < $getListAItems.length; $i++ ){
$getListAItems[$i].onclick =
function(){
sample( this );
};
}
}
function sample( $getItem ) {
var $cloneNode = $getItem.cloneNode( true );
var $sampleListB = document.getElementById( "sampleListB" );
$sampleListB.appendChild( $cloneNode );
}
</script>
window.onload = function () {
var $getListAItems = document.getElementById( "sampleListA" ).children;
for( var $i = 0; $i < $getListAItems.length; $i++ ){
$getListAItems[$i].onclick =
function(){
sample( this );
};
}
}
function sample( $getItem ) {
var $cloneNode = $getItem.cloneNode( true );
var $sampleListB = document.getElementById( "sampleListB" );
$sampleListB.appendChild( $cloneNode );
}
</script>
HTML
<div id="sample">
<div>
<p>複製元リスト</p>
<ol id="sampleListA">
<li>項目Ａ</li>
<li>項目Ｂ</li>
<li>項目Ｃ</li>
<li>項目Ｄ</li>
<li>項目Ｅ</li>
</ol>
</div>
<div>
<p>複製先リスト</p>
<ol id="sampleListB">
</ol>
</div>
<div style="clear: left;"></div>
</div>
<div>
<p>複製元リスト</p>
<ol id="sampleListA">
<li>項目Ａ</li>
<li>項目Ｂ</li>
<li>項目Ｃ</li>
<li>項目Ｄ</li>
<li>項目Ｅ</li>
</ol>
</div>
<div>
<p>複製先リスト</p>
<ol id="sampleListB">
</ol>
</div>
<div style="clear: left;"></div>
</div>
CSS
<style>
#sample div {
float: left;
width: 200px;
min-height: 1em;
}
#sampleListA li {
width: 70px;
cursor: pointer;
}
</style>
#sample div {
float: left;
width: 200px;
min-height: 1em;
}
#sampleListA li {
width: 70px;
cursor: pointer;
}
</style>