cloneメソッドについて

前置き

今回はjQueryのclone()メソッドです。

例によって自分用のメモです。

メソッドの概要

例えば以下のようなhtml要素があったとして、

<div id="parent">

  <div id="child_1">子要素1です</div>

  <div id="child_2">子要素2です</div>

</div>

<div id="anotherFamily"></div>

const thirdChild = $('#child_1').clone()

とするとdiv#child_1のコピーがthirdChildという定数に格納されます。

例えばこの状態で

$('anotherFamily').html(thirdChild)とすると、上記の例が

<div id="parent">

  <div id="child_1">子要素1です</div>

  <div id="child_2">子要素2です</div>

</div>

<div id="anotherFamily">

    <div id="child_1">子要素1です</div>

</div>

のように変わります。

補足

今の例ですが、clone()を用いずに

const thirdChild = #child_1

$('#anotherFamily').html(thirdChild)

とするとどうなるでしょうか？

一見、上記の例と変わらなさそうに見えますが、実は以下のようになります。

<div id="parent">

  <div id="child_2">子要素2です</div>

</div>

<div id="anotherFamily">

    <div id="child_1">子要素1です</div>

</div>

なんと、取得した#child_1が移動してしまうのですね。

コードを組んだ際に都度ビューで確認していれば問題ないと思いますが、今後気をつけなければならないと思いました。