JavaScript

レシピ

HTML・DOM

HTML要素を複製(コピー)する

特定のHTML要素を複製する方法について解説します。

この記事のポイント

  • cloneNodeメソッドtrueを渡すと子孫要素を含めて複製できる
  • 複製したHTML要素は属性もそのまま複製されるため、id属性などの重複に注意する

HTML要素を複製する

複製したいHTML要素に対してcloneNodeメソッドを使うと、全く同じ属性やテキストを持つHTML要素を複製することができます。

cloneNodeメソッドの戻り値は複製したHTML要素のオブジェクトです。
変数などで受け取ることで編集したり、任意の場所へ挿入することで複製したHTML要素をすぐに表示することができます。

また、パラメータにtrueを指定することで子孫要素を含めて複製することができます。
falseにしたい場合は子孫要素は含まずに自身のみ複製します。

コードの解説用に、次のHTMLコードを使用します。

HTMLコード例

<article id="content_area">
	<h2>HTML要素の複製</h2>
	<p>テキストテキストテキスト</p>
	<ul>
		<li>リスト1</li>
		<li>リスト2</li>
		<li>リスト3</li>
	</ul>
</article>

以下の例では、id属性content_area」を持つarticle要素を子孫要素も含めて複製し、afterメソッドで元となる要素のすぐ下に挿入します。

コード例

// 複製するHTML要素を取得
var content_area = document.getElementById("content_area");

// 複製
var clone_element = content_area.cloneNode(true);

// 複製した要素の属性を編集
clone_element.id = "content_area2";

// 複製した要素の子孫要素を編集
var h2_element = clone_element.querySelector("h2");
h2_element.textContent = '複製した要素';

var h2_element = clone_element.querySelector("p");
h2_element.textContent = '複製した要素のテキスト';

// 複製したHTML要素をページに挿入
content_area.after(clone_element);

このコードを実行すると、元のHTML要素のすぐ隣りに複製した要素が挿入されます。
赤字の箇所が複製によって挿入したHTML要素です。

HTMLコード例

<article id="content_area">
	<h2>HTML要素の複製</h2>
	<p>テキストテキストテキスト</p>
	<ul>
		<li>リスト1</li>
		<li>リスト2</li>
		<li>リスト3</li>
	</ul>
</article>
<article id="content_area2">
	<h2>複製した要素</h2>
	<p>複製した要素のテキスト</p>
	<ul>
		<li>リスト1</li>
		<li>リスト2</li>
		<li>リスト3</li>
	</ul>
</article>

複製したHTML要素は属性なども元の要素から丸っと引き継いでしまうため、id属性のような重複が許されない属性を持つ場合は編集が必要になります。

もう1つのパターンとして、子孫要素を含まずに複製する場合はcloneNodeメソッドfalseを渡して実行します。

コード例

// 複製するHTML要素を取得
var content_area = document.getElementById("content_area");

// 親要素のみ複製
var clone_element = content_area.cloneNode(false);

// 複製した要素の属性を編集
clone_element.id = "content_area2";

// 複製したHTML要素をページに挿入
content_area.after(clone_element);

このコードを実行すると、元のHTML要素のすぐ隣りに複製したarticle要素のみが挿入されます。
赤字の箇所が複製によって挿入したHTML要素です。

HTMLコード例

<article id="content_area">
	<h2>HTML要素の複製</h2>
	<p>テキストテキストテキスト</p>
	<ul>
		<li>リスト1</li>
		<li>リスト2</li>
		<li>リスト3</li>
	</ul>
</article>
<article id="content_area2"></article>

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。