iPentec.com  /  Doc  /  JavaScript  /  JavaScript DOM操作

目次

HTMLページの要素を複製する - JavaScript

JavaScriptを利用してHTMLの要素を複製するコードを紹介します。

概要

JavaScriptを利用してHTMLページ内の要素を複製してページ内に配置するコードを紹介します。
要素の複製は、コピー元の要素のオブジェクトを取得しオブジェクトの cloneNode() メソッドを利用します。 要素をコピーしただけでは複製が作成されたのみであり、ページに配置されない状態です。ページへの配置はappendChild() または insertBefore() メソッドを利用します。

書式

(コピー元の要素のオブジェクト).cloneNode([Deep Copyオプション])
[Deep Copyオプション]はtrue または false を指定します。省略するとfalse の動作になります。

記述例

  var copy_element = target_element.coneNode(true);

プログラム1

コード

下記のコードを記述します。
CopyElement.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="CopyElement.css" />
  <title></title>
  <script type="text/javascript">
    function ButtonClick() {
      var elem_c = document.getElementById("frame3");
      var elem_copy = elem_c.cloneNode(false);
      document.body.appendChild(elem_copy);
    }
  </script>
</head>
<body>
  <div id="frame1">Frame1</div>
  <div id="frame2">Frame2</div>
  <div id="frame3">Frame3</div>
  <div id="frame4">Frame4</div>
  <div id="frame5">Frame5</div>

  <input type="button" onclick="ButtonClick();" value="Exec" />

</body>

</html>
CopyElement.css
#frame1 {
  margin-top:0.5rem;
  width: 320px;
  height: 64px;
  border: 1px solid #ff6a00;
}

#frame2 {
  margin-top: 0.5rem;
  width: 320px;
  height: 64px;
  border: 1px solid #ffd800;
}

#frame3 {
  margin-top: 0.5rem;
  width: 120px;
  height: 32px;
  border: 1px solid #4cff00;
}

#frame4 {
  margin-top: 0.5rem;
  width: 320px;
  height: 64px;
  border: 1px solid #0094ff;
}

#frame5 {
  margin-top: 0.5rem;
  width: 320px;
  height: 64px;
  border: 1px solid #b200ff;
}

解説

ページ内の[Exec]ボタンのクリックにより下記のコードが実行されます。
はじめにgetElementById() メソッドにより id="frame3" の要素を取得します。この要素がコピー元の要素になります。 frame3の要素に対し、cloneNode() メソッドを呼び出し、frame3 の要素の複製を作成します。複製されたオブジェクトは cloneNode() メソッドの戻り値として返されます。
cloneNodeメソッドで引数にfalseを与えた場合、複製された要素は要素の内部は複製されません。複製された要素を画面に表示するためにbody要素の appendChild() メソッドを呼び出し、body要素内に複製された要素を追加します。
  function ButtonClick() {
    var elem_c = document.getElementById("frame3");
    var elem_copy = elem_c.cloneNode(false);
    document.body.appendChild(elem_copy);
  }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


[Exec]ボタンをクリックします。[Frame3 Copy]の枠がページの一番最後に追加されます。枠の外観やサイズなどのスタイルはFrame3と同じ色、サイズになっておりFrame3をコピーした要素であることが確認できます。

プログラム2 : コピーした要素の内部を設定する場合

CopyElement.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="CopyElement.css" />
  <title></title>
  <script type="text/javascript">
    function ButtonClick() {
      var elem_c = document.getElementById("frame3");

      var elem_copy = elem_c.cloneNode(false);
      elem_copy.innerHTML = "Frame3 Copy";

      document.body.appendChild(elem_copy);
    }
  </script>
</head>
<body>
  <div id="frame1">Frame1</div>
  <div id="frame2">Frame2</div>
  <div id="frame3">Frame3</div>
  <div id="frame4">Frame4</div>
  <div id="frame5">Frame5</div>

  <input type="button" onclick="ButtonClick();" value="Exec" />

</body>

</html>

解説

[Exec]ボタンをクリックすると下記のコードが実行されます。要素の複製、配置部分は先のHTMLファイルと同様です。 cloneNode()メソッドでは引数がfalseの場合は要素内の子要素はコピーされないため、コピーした要素の要素内のテキストをinnerHTMLプロパティで設定しています。
  function ButtonClick() {
    var elem_c = document.getElementById("frame3");

    var elem_copy = elem_c.cloneNode(false);
    elem_copy.innerHTML = "Frame3 Copy";

    document.body.appendChild(elem_copy);
  }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


[Exec]ボタンをクリックします。[Frame3 Copy]の枠がページの一番最後に追加されます。枠の外観やサイズなどのスタイルはFrame3と同じ色、サイズになっておりFrame3をコピーした要素であることが確認できます。また、コピーした要素の内部の文字列が設定されていることも確認できます。

プログラム3 : Deep Copy をした場合の動作

Deep Copy をした場合の動作を確認します。

コード

下記のコードを記述します。
CopyElementDeep.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="CopyElementDeep.css" />
  <title></title>
  <script type="text/javascript">
    function ButtonClick() {
      var elem_c = document.getElementById("frame3");
      var elem_copy = elem_c.cloneNode(true);

      document.body.appendChild(elem_copy);
    }
  </script>
</head>
<body>
  <div id="frame1">Frame1</div>
  <div id="frame2">Frame2</div>
  <div id="frame3">
    Frame3
    <div id="frame6">
      Frame6
      <div id="frame7">Frame7</div>
    </div>
  </div>
  <div id="frame4">Frame4</div>
  <div id="frame5">Frame5</div>

  <input type="button" onclick="ButtonClick();" value="Exec" />

</body>

</html>
CopyElementDeep.css
#frame1 {
  margin-top: 0.5rem;
  width: 320px;
  border: 1px solid #ff6a00;
}

#frame2 {
  margin-top: 0.5rem;
  width: 320px;
  border: 1px solid #ffd800;
}

#frame3 {
  margin-top: 0.5rem;
  width: 320px;
  border: 1px solid #4cff00;
}

#frame4 {
  margin-top: 0.5rem;
  width: 320px;
  border: 1px solid #0094ff;
}

#frame5 {
  margin-top: 0.5rem;
  width: 320px;
  border: 1px solid #b200ff;
}

#frame6 {
  margin-top: 0.5rem;
  width: 240px;
  height: 64px;
  border: 1px solid #ff006e;
}

#frame7 {
  margin-top: 0.5rem;
  width: 120px;
  border: 1px solid #808080;
}

解説

[Exec]ボタンのクリックにより下記のコードが実行されます。
getElementById() メソッドを呼び出し、ID="frame3" の要素を取得します。取得した要素の cloneNode() メソッドを呼び出し複製を作成します。cloneNodeメソッドの引数にtrueを与えるとDeep Copyの動作となり、コピー元の要素の下位の要素を含めた複製を作成します。複製された要素のオブジェクトは、cloneNode メソッドの戻り値として返ります。
複製されたオブジェクトをbody要素に appendChild() メソッドを呼び出して追加します。
  function ButtonClick() {
    var elem_c = document.getElementById("frame3");
    var elem_copy = elem_c.cloneNode(true);

    document.body.appendChild(elem_copy);
  }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


[Exec]ボタンをクリックします。ページの下部に、Frame3 の要素が複製されて追加されることが確認できます。DeepCopy が有効になっており、Frame3の子要素も複製されていることが確認できます。


参考 : cloneNode(false) で複製した場合

cloneNode(false) で複製した場合には子要素が複製されないため、内部のテキストもコピーされず、高さ0の枠のみが表示される動作になります。

プログラム4 : insertBefore メソッドを利用してページ内に挿入する例

コード

下記のコードを記述します。
CopyElementDeep2.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="CopyElementDeep.css" />
  <title></title>
  <script type="text/javascript">
    function ButtonClick() {
      var elem_c = document.getElementById("frame3");
      var elem_copy = elem_c.cloneNode(true);

      var elem_p = document.getElementById("frame2");
      document.body.insertBefore(elem_copy, elem_p);
    }
  </script>
</head>
<body>
  <div id="frame1">Frame1</div>
  <div id="frame2">Frame2</div>
  <div id="frame3">
    Frame3
    <div id="frame6">
      Frame6
      <div id="frame7">Frame7</div>
    </div>
  </div>
  <div id="frame4">Frame4</div>
  <div id="frame5">Frame5</div>

  <input type="button" onclick="ButtonClick();" value="Exec" />
</body>
</html>

CSSファイルは先の CopyElementDeep.css と同じものを利用します。

解説

[Exec]ボタンのクリックにより下記のコードを実行します。
getElementById() メソッドを利用して ID="frame3" の要素を取得し、cloneNode(true)を呼び出し、ID="frame3"の要素を下位の要素を含めて複製を作成します。
続いて getElementById() メソッドを利用して ID="frame2" の要素を取得します。bodyオブジェクトの insertBefore() メソッドを呼び出し、bodyタグ内の id="frame2" の手前の位置に、複製した要素を挿入します。~ 
  function ButtonClick() {
    var elem_c = document.getElementById("frame3");
    var elem_copy = elem_c.cloneNode(true);

    var elem_p = document.getElementById("frame2");
    document.body.insertBefore(elem_copy, elem_p);
  }

実行結果

HTMLファイルをWebブラウザで表示します。下図のページが表示されます。


[Exec]ボタンをクリックします。"Frame3" の枠の複製が作成され、"Frame2" の手前に挿入されたことが確認できます。複製された要素は下位の要素も含めた複製が作成されていることも確認できます。

プログラム5 : 指定した要素の子要素に配置する

CopyElementDeep3.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="CopyElementDeep.css" />
  <title></title>
  <script type="text/javascript">
    function ButtonClick() {
      var elem_c = document.getElementById("frame3");
      var elem_copy = elem_c.cloneNode(true);

      var elem_p = document.getElementById("frame5");
      elem_p.appendChild(elem_copy);
    }
  </script>
</head>
<body>
  <div id="frame1">Frame1</div>
  <div id="frame2">Frame2</div>
  <div id="frame3">
    Frame3
    <div id="frame6">
      Frame6
      <div id="frame7">Frame7</div>
    </div>
  </div>
  <div id="frame4">Frame4</div>
  <div id="frame5">Frame5</div>

  <input type="button" onclick="ButtonClick();" value="Exec" />

</body>

</html>

CSSファイルは先の CopyElementDeep.css と同じものを利用します。

解説

[Exec]ボタンのクリックにより下記のコードを実行します。
getElementById() メソッドを利用して ID="frame3" の要素を取得し、cloneNode(true)を呼び出し、ID="frame3"の要素を下位の要素を含めて複製を作成します。
続いて getElementById() メソッドを利用して ID="frame5" の要素を取得します。取得した ID="frame5" のオブジェクトの appendChild() メソッドを呼び出し、id="frame5" の子要素として、複製した要素を挿入します。~ 
  function ButtonClick() {
    var elem_c = document.getElementById("frame3");
    var elem_copy = elem_c.cloneNode(true);

    var elem_p = document.getElementById("frame5");
    elem_p.appendChild(elem_copy);
  }

実行結果

HTMLファイルをWebブラウザで表示します。下図のページが表示されます。


[Exec]ボタンをクリックします。"Frame3" の枠の複製が作成され、"Frame5" の中に追加されたことが確認できます。複製された要素は下位の要素も含めた複製が作成されていることも確認できます。

著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

掲載日: 2020-04-10
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.