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

您的代码还有三个注释：

所以你的代码看起来像是：

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

$template.appendTo("body");

Answer 3

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 4

您可以像这样使用clone（）方法：

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

请查看http://api.jquery.com/clone/以获取更多信息。

Answer 5

3行解决方案可行，但我建议使用1行短jQuery样式解决方案：

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

Answer 6

对我来说clone()与<template>不兼容。最好的答案是来自Manuel的答案，但是为了从模板生成JQuery对象而不添加他的元素，我使用了这种单行代码：

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

使用此html

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