JQuery：通过 DOM 操作插入大量 html - 可维护性？答案

【问题标题】：JQuery:Inserting big amounts of html through DOM manipulation - maintainability?JQuery：通过 DOM 操作插入大量 html - 可维护性？
【发布时间】：2011-07-21 12:33:39
【问题描述】：

我找到了关于使用 jquery 插入 dom 元素的良好做法的好帖子，例如 this、this 和 this

只需要插入一些元素就可以了，但在我看来，从可维护性的角度来看，这些选项非常糟糕（代码重复了两次，因此如果需要任何更改，则需要进行两次那么它变得很容易出错），

这是（只是一小部分）我所拥有的

<script type="text/javascript">
var phnFragment = "<tr><td align=\"right\">Telephone:</td><td colspan=\"2\"><select name=\"select\" size=\"1\"style=\"width: 100px;\"><option>-- Choose --</option><option>Home</option><option>Mobile</option><option>Work</option></select><input type=\"text\" size=\"20px\" /></td></tr>";
    $(document).ready(function() {
    $('#addmorephones').click(function() {
                $("#phones").append(phnFragment);
            });
    });
</script>
....
....
<tr id="phones">
        <td align="right">Telephone:</td>
        <td colspan="2"><select name="select" size="1"
            style="width: 100px;">
            <option>-- Choose --</option>
            <option>Home</option>
            <option>Mobile</option>
            <option>Work</option>
        </select><input type="text" size="20px" /> <a href="javascript:void(0);" id="addmorephones">[+]</a>
        </td>
    </tr>

有没有更好的方法来做到这一点？有没有办法告诉 jquery 复制部分 dom 树并将其用作要插入的片段？

很想学习替代方法

【问题讨论】：

标签： jquery dom code-maintainability

【解决方案1】：

有没有办法告诉 jquery 复制部分 dom 树并将其用作要插入的片段？

是的：clone。（您甚至不需要 jQuery；cloneNode 是 DOM API 的一部分。）如果您克隆的内容中有任何 id 值，那么您当然需要迭代更改它们的结果，因为ids 必须是唯一的。但它非常适合表格行之类的东西。

在页面加载时，您可以抓取一个真实模型，将其克隆（无需将其附加到文档中），清除不需要的任何内容，然后继续克隆该模型。有助于使您的 JavaScript 在某种程度上与您的标记分离。

示例：

HTML：

<table>
  <tbody>
    <tr><td>I'm a row in the table</td></tr>
  </tbody>
</table>

JavaScript：

jQuery(function($) {
  var counter = 10,
      rowModel;

  // Get the row model, clone it, remove the
  // content we'll replace anyway.
  rowModel = $("tr:first").clone();
  rowModel.find("td:first").empty();

  // Do our first tick
  tick();

  // Use the model to append to the table
  function tick() {
    var clone = rowModel.clone();

    clone.find("td:first").html("Added at " + new Date());
    $("tbody:first").append(clone);

    // Again?
    if (--counter > 0) {
      setTimeout(tick, 500);
    }
  }

});

Live copy

显然，这是一个快速和肮脏的，但你明白了。如果您使用data-xyz 属性（HTML5 中允许）、names、classes 等，则可以避免将代码与结构过于紧密地联系在一起。

【讨论】：

感谢您的全面回答。这确实是我一直在寻找的解决方案。顺便说一句，关于“cloneNode”的好提示
@maverick：很酷，很高兴有帮助！

【解决方案2】：

T.J.如果您有想要重用的现有标记，那么有一个很好的答案。您还可以使用 text/html 脚本类型将您的内容作为模板放入标记中，如下所示：

http://ejohn.org/blog/javascript-micro-templating/

【讨论】：

甚至比这更好，还有一个用于模板的 JQuery 插件。 api.jquery.com/jQuery.template
感谢 jvenema，这是一个巧妙的技巧，我相信我也会使用一些模板系统@Josh，你是对的，我喜欢把它作为插件。

【解决方案3】：

在这种情况下，您可以在 ready 事件期间获取 #phones 的内容：

$(document).ready(function() {
    var phnFragment = $("#phones").html();

    $('#addmorephones').click(function() {
        $("#phones").append(phnFragment);
    });
});

如果需要复制更复杂的信息（比如事件），可以使用.clone() method：

$(document).ready(function() {
    var $phnFragment = $("#phones").children().clone();

    $('#addmorephones').click(function() {
        $("#phones").append($phnFragment.clone());
    });
});

【讨论】：