Cloning elements [div] [script] in Javascript

Question

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>

basically is just a var that holds the value of the parent div. please, omit the name — Mike, Jan 11 '11 at 17:30
You need to be more specific. Please show end result of the `somevar` object 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, Jan 11 '11 at 17:45

score 4 · Answer 1 · answered Jan 11 '11 at 17:40

4

Try 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);
}

`

answered Jan 11 '11 at 17:40

Jishnu A P

14,202
8
40
50

That does the job for the div id, now how could I increase the variable inside the ` – Mike Jan 11 '11 at 17:54

meder omuraliev · Answer 2 · 2011-01-11T17:23:04.060

1

Set counter=0 and then increment after each cloning invocation with counter++ and use clone.id and set it to 'div_' + counter

edited Jan 11 '11 at 17:23

answered Jan 11 '11 at 17:08

meder omuraliev

183,342
71
393
434

This does not solve the OP's question for changing the contents of the script tag that was deep-cloned. – Phrogz Jan 11 '11 at 17:25

Kai · Answer 3 · 2011-01-11T18:08:09.450

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 recommend the former.

Cloning elements [div] [script] in Javascript

3 Answers3

Linked

Related