clone

.clone()

マッチした要素をコピー(ディープコピー)します。 要素と、全てのイベント、子要素、および全てのイベントを含みます。

u('.elementToClone').clone()

パラメータ

この関数はパラメータを受け取りません。

拡張機能

• デフォルトで以下の拡張機能が有効です。
  • select : セレクトボックスで選択された値はコピーされます。 グローバルで無効にするには u.prototype.mirror.select = false;を追記してください。
  • textarea : テキストエリアの入力内容はコピーされます。 グローバルで無効にするには u.prototype.mirror.select = false;を追記してください。

戻り値

u

Umbrellaのインスタンスを返します。

例

ノードをコピーして、別ノードに追加します。

<div class="container">
  <div class="testClone1">Hello</div>
  <div class="cloneDestination"></div>
</div>

var clone = u('testClone1').clone();
u('.cloneDestination').append(clone);

結果は以下になります。

<div class="container">
  <div class="testClone1">Hello</div>
  <div class="cloneDestination">
    <div class="testClone1">Hello</div>
  </div>
</div>

デモ

プルダウンを選択するたびに、 プルダウンの内容とテキストエリアの内容がコピーされます。

JavaScript

u('#demo select').on('change', function(){
  var clone = u('#demo').clone();
  u('#demo_to').children().remove();
  u('#demo_to').append(clone);
});

HTML

<div id="demo">
  <p>以下の内容をコピーします。</p>
  <select>
    <option value="1">リスト1</option>
    <option value="2">リスト2</option>
  </select>
  <br>
  <textarea rows="4" cols="40">テキストエリア</textarea>
</div>
<div id="demo_to">
  <p>ここに追加します。</p>
</div>

関連項目

.append() マッチした要素の子要素として、HTML要素を末尾に追加します。