jQuery 复制元素中的所有 HTML 代码，以便稍后附加到该元素答案

【问题标题】：jQuery copy all HTML code within an element to append to this element later onjQuery 复制元素中的所有 HTML 代码，以便稍后附加到该元素
【发布时间】：2015-09-11 10:23:21
【问题描述】：

假设我有以下带有要搜索的输入字段的 HTML 代码：

<input class="form-control" id="search" autocomplete="off" spellcheck="false">

<div class="media">
    <div class="col-md-12">
        <p class="tag"><i>Some text</i></p>    
    </div>
    <div class="col-md-12">
        <p class="tag"><i>Some text</i></p>    
    </div>
</div>

我使用下面的代码来查找包含我的搜索查询的所有段落元素。

$html = $('.media>div');

$('#search').keyup(function() {
    var searchstring = $(this).val().toLowerCase();

    $(".tag>i").each(function () {
        var text = $(this).text().toLowerCase();

        $('.media').empty().append($html);

        if (text.indexOf(searchstring) > -1) {
            $(this).prop("disabled", false);
        } else {
            $(this).closest('.col-md-12').prop("disabled", true).detach();
        }
    });
});

搜索功能工作正常，除了我似乎无法复制 '.media' 类中的所有 div 的副本，我需要在每次触发 keyup() 事件时将其附加到 '.media'。我需要为示例代码中的 $html 变量分配什么以便稍后附加？

【问题讨论】：

标签： jquery html search

【解决方案1】：

改为使用clone()：

$html = $('.media>div').clone();

或者，如果您有任何事件附加到这些内部 div，您可以传递一个布尔值 true 以将这些事件也附加到克隆的事件：

$html = $('.media>div').clone(true); // pass true to get the events attached

var $html = $('.media > div').clone();

$('#clone').html($html);

alert($html.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='media'>
  <div>This is for clone.</div>
  <div>This is for clone.</div>
</div>
<hr>put cloned elements below this:
<hr>
<div id='clone'></div>

【讨论】：

这似乎不起作用。当我做 alert($html.length) 它返回 0.
@MarijnvanGool 无法复制，刚刚添加了一个演示。
它可能不起作用，因为 HTML 内容是由服务器生成并由 javascript 附加到 .media 类的。
@MarijnvanGool 绝对可能是这种情况，所以你应该把这个克隆方法放在 dom 中之后。
现在好像可以了。但无论我是否使用 .clone()，它似乎都在做同样的事情。有什么区别？

【解决方案2】：

Jai 是对的，使用 clone()

$allHtml= $('.media>div').clone();

【讨论】：