2013年11月21日

element.cloneNodeメソッド。要素の複製 DOM

スポンサード リンク

 element.cloneNode(deep)メソッド
指定したノードを複製します。



WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)
コロリポプラン 詳細はこちら

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>element.cloneNodeメソッド, DOM 要素の複製</title>
<style type="text/css">
<!--
#olIDb li{
   margin-bottom: 5px;
   font-weight:bold;
    }
#olIDb .liClas0 input{
   border:1px solid gray;
   background-color:#fff;
    }
#olIDb .liClas1 input{
   border:1px solid gray;
   background-color:#f2ffb3;
    }
-->
</style>

<script type="text/javascript">
     /*** サンプルA コード ***/
 var j=1;
function nodeCopyA(){
 if(j==5){
  alert("複製はこれで終わりです。");return;}
   var node=document.getElementById("liIDa"); // 複製元ノード
    var dupNode=node.cloneNode(true); // ノードの複製を生成,クローンノード
     var parentOj=document.getElementById("olIDa"); // 親ノード
      dupNode.id="liIDa"+j; // クローンノードのID名を付け替え
     parentOj.appendChild(dupNode); // 親ノードの末尾にクローンノードを追加
    j++;
          }
    /*** サンプルB コード ***/
  var ary = new Array("出身:","名前:", "住所:","性別:","年齢:") // ラベル
  var i=1;
function nodeCopyB(){
 var aryLen = ary.length;
  if(aryLen==i){
   alert("入力項目の複製はこれで終わりです。");return;}
var node=document.getElementById("liIDb"); // 複製元ノード//
 var dupNode=node.cloneNode(true); // ノードの複製を生成,クローンノード
  var parentOj=document.getElementById("olIDb"); // 親ノード
    dupNode.id="liIDb"+i; // クローンノードのID名を付け替え
dupNode.className="liClas"+(i%2); // クラス名を設定(i%2)は '0' 或は '1'
    parentOj.appendChild(dupNode); // 親ノードの末尾にクローンノードを追加
var Input=dupNode.getElementsByTagName("input")[0]; // クローンノードの"input"
     Input.value=""; // "input" 入力ボックスの値を空に
var Label=dupNode.getElementsByTagName("label")[0]; // クローンノードの"label"
     Label.innerHTML=ary[i]; // "label"の文字列 を付替え
  i++;
         }
</script>
</head>
<body>
       <!--サンプルA HTML-->
<form action="#">
 <p><input type="button" value="ノード複製A" onclick="nodeCopyA()" />
  <label>サンプルA</label></p>
<ol id="olIDa">
 <li id="liIDa"><label>出身: </label>
  <input type="text" size="45" value="javascript県 cloneNode郡" />
 </li>

</ol>
</form>
            <!--サンプルB HTML-->
<form action="#">
 <p><input type="button" value="ノード複製B" onclick="nodeCopyB()" />
  <label>サンプルB</label></p>
<ol id="olIDb">
 <li id="liIDb" class="liClas0"><label>出身: </label>
  <input type="text" size="45" value="javascript県 cloneNode郡" />
 </li>
</ol>
</form>
</body>
</html>

element.cloneNode(deep)メソッド
 指定されたノード  'element' のクローンを作成します。
返り値は新しく生成される 'element' のコピーノードです。

 引数 deep に 'true' を指定しすれば、当該ノードの全ての子孫ノードが複製されます。
上記サンプルの場合、"LI要素" "LABEL要素" "INPUT要素"が複製されます。↓↓
<li id="liIDa"><label>出身: </label>
  <input type="text" size="45" value="javascript県 cloneNode郡" />
</li>


'false'を指定した場合は、当該ノードのみが複製されます。

element.appendChild(appendNode)メソッド
 element.appendChild(appendNode)は、'element'に指定した親要素の子ノードリストの末尾に
引数「appendNode」に指定したノードを追加するメソッドです。
詳細 appendChild() メソッド


タグ:cloneNode DOM
posted by javaScript at 22:09 | 大阪 ☀ | DOM | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。