设置当前附加元素的 ID

Question

我有一个<script type="text/template>用于创建新元素的内部 HTML。\n我如何另外向这些创建的元素添加 ID？

\n\n

<script type="text/template" id="element-template">\n    <div class="element-container">\n        <p>Template</p>\n    </div>\n</script>\n

\n\n

期望的结果：

\n\n

<div id="my-element" class="element-container">\n   <p>Template</p>\n</div>\n

\n\n

以下代码有效，但我不想使用find(\'.element-container\')在父级上使用，因为该类将来可能会发生变化：

\n\n

var template = $(\'#element-template\').html();\n$(\'#output\').append(template).parent().find(\'.element-container\').attr(\'id\', \'my-element\');\xe2\x80\x8b\n

\n\n

使用可以在这里找到一个JSFiddle： http: //jsfiddle.net/RZrkB/1/

\n

Answer 1

我会让template变量保存一个 jquery 对象而不是 html。

这样就可以了.clone()，直接添加一个id就可以了。

var template = $( $('#element-template').html() );

$('#output').append( template.clone().attr('id','my-element') );

演示地址： http://jsfiddle.net/gaby/RZrkB/3/