I'm trying to clone a div in pure Javascript, however, cloneNode leads to duplicate ids (div_0). I would like to increment the id as div_1, div_2... and do the same to somevar = {'elem', 'div_1'}... Thanks
<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>
I'm trying to clone a div in pure Javascript, however, cloneNode leads to duplicate ids (div_0). I would like to increment the id as div_1, div_2... and do the same to somevar = {'elem', 'div_1'}... Thanks
<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>
-
What do you mean do the same in
somevar? – meder omuraliev Commented Jan 11, 2011 at 17:29 - basically is just a var that holds the value of the parent div. please, omit the name – Mike Commented Jan 11, 2011 at 17:30
-
You need to be more specific. Please show end result of the
somevarobject after a new div has been closed. Please do not assume that I know what you want. By the way, that syntax is invalid. It has to be a key:value or you have to make it an array. – meder omuraliev Commented Jan 11, 2011 at 17:45
3 Answers
Reset to default 4Try this..
`
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);
}
`
Set counter=0 and then increment after each cloning invocation with counter++ and use clone.id and set it to 'div_' + counter
I haven't had a chance to test this, but this might do the trick:
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);
}
If you want to update a global variable somewhere, you can do return { "elem" : "div_" + last_inc }; and assign the result of the function. Or instead of a return, you could explicitly make the assignment. I'd remend the former.