重复一个包含id属性定义的元素的HTML片段

Question

我需要在页面上多次重复html片段，但问题是，包含的HTML元素已定义为页面上应该是唯一的id。那么，如果不删除元素中的id属性，我可以重复此片段的正确方式是什么？

我可以使用iframe作为这个片段的容器&让页面上存在重复ID吗？

Answer 1

您可以使用JavaScript克隆该代码段并同时更改ID。

例如，如果你片段是：

<div id="snippet"> 
    <table id="list"> 
    <tr id="0"> 
     <td id="firstName0">John</td> 
     <td id="lastName0">Smith</td> 
    </tr> 
    <tr id="1"> 
     <td id="firstName2">John</td> 
     <td id="lastName2">Doe</td> 
    </tr> 
    </table> 
</div> 

使用

$("#snippet").clone(false).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + "_1"); }); 

方能产生

<div id="snippet_1"> 
    <table id="list_1"> 
    <tr id="0_1"> 
     <td id="firstName0_1">John</td> 
     <td id="lastName0_1">Smith</td> 
    </tr> 
    <tr id="1_1"> 
     <td id="firstName2_1">John</td> 
     <td id="lastName2_1">Doe</td> 
    </tr> 
    </table> 
</div> 

这将解决ID重复问题。