cloneNodeメソッド

cloneNodeメソッドは、要素をクローンしてその正確なコピーを取得することを可能にします。このコピーは、その後、prepend、append、appendChild、insertBefore、またはinsertAdjacentElementメソッドを使用してページに挿入できます。

このメソッドはパラメータとしてtrueまたはfalseを受け取ります。trueが渡された場合、要素はすべての属性と子要素を含めて完全にクローンされます。falseの場合、要素自体のみが（子要素なしで）クローンされます。

構文

javascript要素.cloneNode(true または false);

例

クラスelemを持つブロックのコピーを作成し、それを#parentブロックの末尾に挿入します：

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

javascriptlet parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

コード実行結果：

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

例

取得したクローンは通常の要素と同様に操作できます：

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

javascriptlet parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'new text1';
clone.children[1].textContent = 'new text2';

parent.appendChild(clone);

コード実行結果：

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
  <div class="elem">
    <p>new text1</p>
    <p>new text2</p>
  </div>
</div>

関連項目