node.cloneNode( deep )メソッド

node.cloneNode( deep )は、「node」に指定したノードを複製するメソッド。引数「deep」に子孫ノードも複製するかどうかを指定できる。

構文

var $cloneNode = $elementNodeReference.cloneNode( deep );

引数

deep
子孫ノードも複製するかどうか。
「true」を指定すると、子孫ノードも複製する。
「false」を指定すると、子孫ノードは複製しない。

戻り値

複製したノード。

サンプル

複製元リスト

  1. 項目A
  2. 項目B
  3. 項目C
  4. 項目D
  5. 項目E

複製先リスト

サンプルの動作について

複製元リストの「項目A~E」をクリックすると、複製先リストにクリックした項目を複製する。

サンプルのソースコード

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>

HTML

<div id="sample">
    <div>
        <p>複製元リスト</p>
        <ol id="sampleListA">
            <li>項目A</li>
            <li>項目B</li>
            <li>項目C</li>
            <li>項目D</li>
            <li>項目E</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>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, ノード, メソッド, リファレンス, 逆引き パーマリンク