要素を追加する際にclone()メソッドを使用する理由を教えていただけませんでしょうか

Question

こんにちは。

select要素にoption要素を動的に追加したいのですが、あるサンプルコードで以下のようにclone()メソッドを使用していました。（コードの最終行）
clone()メソッドは無くてもoption要素は追加できるように思うのですが、clone()メソッドを使う理由が何かしらあるのでしょうか。

よろしくお願いいたします。

  var optionObj = [
    { text: 'aaa', value: 'aaa' },
    { text: 'bbb', value: 'bbb' },
    { text: 'ccc', value: 'ccc' }
  ];

  for (var i = 0; i < optionObj.length; i++) {
    var prop = optionObj[i];
    var $option = $('<option></option>');

    $option.attr('value', prop.value);
    $option.text('value', prop.text);

    $('select').append($option.clone());
  }

Answer 1

このコードでclone()する必要はありません。

ただし、jQuery で $('<option></option>') で要素を生成するのは遅いので、この行をループの外に出してclone()することで高速化できるかもしれません。(そもそも、実行時パフォーマンスが気になるならjQueryを使うべきではありませんが)

Comments

[kg1008]

ご回答ありがとうございます！
jQueryが遅いというのは勉強不足でした。
要素の生成が遅いのであればint32_tさんの仰るようにループの外に出した方が良いですね！

Answer 2

テンプレや既存のHTML要素のcloneは使いまわしをするときにつかうので
今回の流れでは不要です。
ちょっとソースもおかしいですね。こんなふうにするとよいかと

  $('select').append(
    $.map(optionObj,function(x){
      return $('<option>').val(x.value).text(x.text);
    })
    );

Comments

[kg1008]

ご回答ありがとうございます！
コードの改善案も大変勉強になりました。

例えば下記コードのようにselect要素が複数あり、すべてに同じ要素を追加する場合はclone()が必要になりますでしょうか。

$('#select1').append($option.clone());
$('#select2').append($option.clone());
$('#select3').append($option.clone());

また、下記のようにclone()が無い場合は不具合が発生しますでしょうか。

$('#select1').append($option);
$('#select2').append($option);
$('#select3').append($option);

[kg1008]

質問ばかりですみません。
教えていただきました改善案のコードですが、$.map()を使っているのでoptionObjの中身を保持したい場合は使用を避けた方がよろしいでしょうか。
よろしくお願いいたします。

[yambejp]

＞ select要素が複数あり、すべてに同じ要素を追加

やってみればわかると思うのですが、私の提示したソースのままで
複数のselectにおなじoptionを挿入できます
またmap処理はjQueryでも生のjsでも非破壊処理なので使用に制限はありません

[kg1008]

ご返信ありがとうございます！
非破壊的処理という言葉を存じていませんでした。
おかげさまで非破壊的処理・破壊的処理について学ぶことが出来ました。