jQuery 入門 | 要素の操作 | 要素のコピー .clone()

jQuery は、要素やコンテンツを簡単にコピーできるメソッドを提供している。

要素のコピー

次のメソッドを使用すると、選択した要素やコンテンツをコピーして、新しい HTML 要素やコンテンツを生成できる。

.clone() メソッド

.clone() メソッドは、選択した要素をコピーして新しい HTML 要素を生成する。

次のような要素があるとき、

<p id="hello">こんにちは。</p>
<p id="devkuma">devkuma です。</p>

次のように hello 要素をコピーし、.appendTo() メソッドを使用して貼り付ける。

$("#hello").clone().appendTo("#devkuma");

コード実行

上の例を実行するとわかるように、.clone() メソッドは既存の HTML 要素をコピーして新しい HTML 要素を生成するだけである。
そのため、必ず .append() メソッドや .appendTo() メソッドのような別のメソッドを利用して要素を追加する必要がある。
.clone() メソッドを使用せずに .appendTo() メソッドだけを使用すると、既存の HTML 要素そのものを追加する点が異なる。

.appendTo() メソッドは、選択した要素を「対象要素の最後」に追加するメソッドである。