如何重用HTML用户界面元素？

问题描述

| 我有以下HTML：

<div id=\"addFieldUI\" style=\"display: none\">
<div>
    Field Name:
    <input type=\"text\" />
</div>
<div>
    Field Value
</div>
<div>
    Data Type:
    <select>
        <option>Price</option>
    </select>
</div>

我想至少在另外两个jQuery模式中重用HTML。如果我使用“ 1”将HTML插入HTML元素中，那么如果我在字段中使用输入ID，就会遇到元素重复的问题。我应该使用输入名称吗？我应该使用\'script \'代码块而不是div吗？如何创建可重用的HTML？ 编辑 我知道jQuery数据模板，但是在这种情况下，我只想在MODAL对话框中重用HTML。例如。如果我使用相同的表格来创建和编辑数据。     

解决方法

大概是这样的：

var counter = 0;
$(\'#otherElem\').html(
    $(\'#addFieldUI\')
        .clone()
        .attr(\'id\',\'addFieldUI-\' + counter++)
        .html()
);

    ,您可以将类名用作钩子，并且在附加到其他div之前，请使用Js动态添加ID。     ,有一个叫做jQuery Templates的库，您总是可以尝试一下，我经常在ASP.NET MVC中使用它，但是可以在任何地方使用。 在Git中，您有一些演示 例：

<script id=\"movieTemplate\" type=\"text/x-jquery-tmpl\">
    <li>
        <b>${Name}</b> (${ReleaseYear})
    </li>
</script>

<ul id=\"movieList\"></ul>

<script type=\"text/javascript\">

    var movies = [
        { Name: \"The Red Violin\",ReleaseYear: \"1998\" },{ Name: \"Eyes Wide Shut\",ReleaseYear: \"1999\" },{ Name: \"The Inheritance\",ReleaseYear: \"1976\" }
    ];

    $( \"#movieTemplate\" ).tmpl( movies ).appendTo( \"#movieList\" );

</script>