javascript - jQuery追加模板？

我正在尝试使用jQuery插入一些模板，并在使用时得到两个不同的结果:

一种)

var $template = $("#productTemplate").html();

var $template = $($("#productTemplate").html());

如果使用a)情况，则可以多次添加模板；如果使用b)，则只能添加一次模板。
那么区别是什么呢？

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="main.js"></script>
</head>

<body>


<div class="but">
    <a href="#" class="showForm"> Click </a>
</div>


<script id='productTemplate' type='text/template'>
    <div class="product">
        <h1>H1</h1>
    </div>
</script>

</body>
</html>

main.js

$(document).ready(function(){


    var $template = $($("#productTemplate").html());

    $(".showForm").on("click",function() {
        $("body").append($template);
    });

});

最佳答案

在(a)中，$template是一个字符串，并且.append($template)将始终在添加字符串之前基于该字符串创建一个新的DOM片段。

在(b)中，$template是一个对象，因为$(HTML_String)返回jQuery，并且.append($template)将始终使用同一对象-重新添加该对象将在DOM中移动它。要重用$template，您需要在追加之前显式对其进行.clone()。