jQuery 1つの要素を複数箇所に表示したい

質問

いつもこちらでお世話になっています。
jQuery初心者です。

また、お知恵を拝借したく、お願いします。

以下のようなHTMLがあります。

やりたい事は
<div class="info">の中の要素全て(ul以下)を
<div class="hoge">の中にも表示したいのです。

ですが、以下のスクリプトのように書くと、
今度は、<div class="info">の中の要素が表示されなくなり、
<div class="hoge">の中に表示されました。

<div class="info">の中の要素は
表示のままで、重複して<div class="hoge">の中に
表示させる方法ってありますか？

▼HTML
-------------------
<div class="hoge"></div>

～別要素(省略)～

<div class="info">
　<ul>
　　<li>項目1</li>
　　<li>項目2</li>
　</ul>
</div>

▼Script
-------------------
var contents = $("div.info ul");
$("div.hoge").html(contents);

-------------------
多分、基本的な事なのかもですが、
1つの要素を重複して表示できる方法がありましたら
詳しい方、ご教授ください。

どうぞ宜しくお願いいたします。

回答No.1

kuzumiHK · ベストアンサー

参照渡しの問題ですね。
オブジェクトは変数に格納してもコピーされたものではなく
現在あるそのものを見ているため、そのまま他に表示する指示をすると、
見た目上、元のあった場所のものが移動してしまいます。

クローンを作ってそれを入れ込めば解決しそうです。

var contents = $("div.info ul").clone(true);
$("div.hoge").html(contents);

お礼

kuzumiHKさん

早々のご回答、大変ありがとうございます。
無事に期待通りに出来ました！

変数に格納しても、移動してしまうんですね。

クローンなるものがあるとは！
数時間パソコンの前で格闘していたのに、
こんな一言で解決してしまうとは…

今後もクローンはいろいろな場面で使えそうです。

勉強させていただきました。

ありがとうございました。