从模板元素创建元素？

Question

我遇到了一些麻烦:

template = $("#template");
$(template).attr("id", "newid");

$(template).appendTo("body");

我想要做的是为模板分配一个id,然后修改内容.麻烦的是,我目前指的是实际的模板元素,因此id正在改变它.再次使用此模板时,由于ID不同,我无法选择.

关于最佳方法的任何建议？

Answer 1

克隆对象:

template = $("#template").clone();
template.attr("id","newid");
template.appendTo("body");

Answer 2

HTML5提供了一个template元素:

contents = $('#template').html();
copy = $('<div id="copy"></div>');
$('body').append(copy.append(contents));

HTML部分:

<html>
  <body>
    <template id='template'>
    </template>
  </body>
</html>

这种clone方法还不够.

Answer 3

关于代码的三个注释:

所以你的代码看起来像:

var $template = $("#template").clone();
$template.attr("id", "newid");

$template.appendTo("body");

因为创建jQuery对象是很多工作(你可以看看jQuery源代码)以及为什么要再次执行它,如果你已经完成它并将结果存储在变量中？即使它不是那么多工作,即使它只是缓存读取,只需引用已经存储的变量总是比其他任何东西都要快. (2认同)

Answer 4

对我来说clone()没有工作<template>。最佳答案是 Manuel 的答案，但为了从模板生成 JQuery 对象而不像他那样添加元素，我使用了这一行：

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

用这个html

<html>
 <body>
  <template id='template'>
  </template>
 </body>
</html>