我正在尝试在纯Javascript中克隆div,但是,cloneNode会导致重复的id(div_0)。我想将id增加为div_1,div_2 ...并对somevar = {'elem','div_1'}执行相同操作...谢谢
<html>
<head></head>
<body>
<div id="mydiv">
<div id="div_0">
<script type="text/javascript">
<!--
somevar = {'elem', 'div_0'};
//-->
</script>
<p>HELLO</p>
</div>
</div>
<a href="#" onclick="cloning()">CLONE</a>
<script type="text/javascript">
function cloning() {
var container = document.getElementById('mydiv');
var clone = document.getElementById('div_0').cloneNode(true);
container.appendChild (clone);
}
</script>
</body>
</html>
答案 0 :(得分:4)
试试这个..
`
function cloning() {
var container = document.getElementById('mydiv');
var clone = document.getElementById('div_0').cloneNode(true);
clone.setAttribute('id','div_'+document.getElementById('mydiv').getElementsByTagName('div').length);
container.appendChild (clone);
}
`
答案 1 :(得分:1)
设置counter=0
,然后在cloning
每个counter++
次调用后递增,并使用clone.id
并将其设置为'div_' + counter
答案 2 :(得分:0)
我没有机会对此进行测试,但这可能会解决问题:
function cloning (e) {
if (typeof e === 'string') {
e = document.getElementById(e);
}
var clone = e.cloneNode(true),
last_inc = cloning.last_inc || parseInt(e.id.match(/(\d+)$/)[0], 10);
last_inc += 1;
clone.id = 'div_' + last_inc;
cloning.last_inc = last_inc;
e.parentNode.appendChild(clone);
}
如果要在某处更新全局变量,可以执行return { "elem" : "div_" + last_inc };
并分配函数的结果。或者不是返回,您可以明确地进行分配。我推荐前者。