Javascript，克隆页面元素

Question

在我的网络应用程序中，我需要创建许多具有不同内容的相同块。我不想在服务器上完全形成元素，考虑到需要从用户的输入创建其中一些元素。因此，我在客户端看到了两种创建此类块的方法：

1. 使用jQuery（或只是javascript）按元素创建块元素。缺点是创建这些块的代码片段不是可识别的HTML，这在我看来是不好的，而且也很难修改。
2. 创建一个HTML元素（比如一个div），使其不可见，然后克隆它并使用它来创建必要的新元素。

不过，我不确定哪种方式更好，而且可能有更好的变体。我试图谷歌这个问题，但无法找到任何东西。

你会推荐什么？

Answer 1

jquery的

var elementClone  = $(element).clone();

或（不是更好）：

var elementClone = $(element).html();

的javascript

var elementClone = document.getElementById('elementID').cloneNode(true);

希望这能帮到你

Answer 2

您可以随时使用基本DOM

var clone = document.getElementById('elementID').cloneNode(true);
document.body.appendChild(clone); //wherever you want to place the cloned element

Answer 3

另一种方法是使用模板引擎，例如mustache，underscore或Handlebars。

Answer 4

如果没有关于“相同的块”和“不同内容”结构的更多详细信息，很难给出很好的答案。

前段时间我正在解决类似（或者说听起来很相似）的问题，Pure template engine（repeat a node example）非常适合解决我的问题。

Answer 5

如您所述，有几种方法可以做到这一点。最常见的是使用templating engine。模板引擎允许您专注于标记内容（在块之间不同），并自动执行输出周围标记的任务。

这种方法的一个非常简单的例子（尽管可能是最不方便的一种）是将内容标记为精简XML，并使用XSLT将其转换为所需的HTML。可以在此处找到有关此方法的教程：https://developer.mozilla.org/en-US/docs/Transforming_XML_with_XSLT

在不推荐单个模板引擎的情况下，这篇文章比较了各种浏览器方面的替代方案：Browser-side Template Engines Roundup: Google Closure Templates, jTemplates and PURE