HTML要素を複製（コピー）する

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メソッドで元となる要素のすぐ下に挿入します。

JS コード例

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

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

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

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

let 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を渡して実行します。

JS コード例

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

// 親要素のみ複製
let 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>

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

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