Create new div with exact same inner and outer HTML as existing div, but different id with Javascript

Question

So my problem is that when i change the id of new div in javascript it changes the id of both.

HTML

<div id = "1" style="background:green;"> existing div </div>

JAVASCRIPT

var div = document.createElement("div");

     div  = document.getElementById("1");
     var id = 2;

    div.setAttribute("id", id);

   document.getElementById(parent1).innerHTML = div.outerHTML;

What i get

<div id = "2" style="background:green;"> existing div </div>
<div id = "2" style="background:green;"> existing div </div>

What i want

<div id = "1" style="background:green;"> existing div </div>
<div id = "2" style="background:green;"> existing div </div>

score 2 · Answer 1 · answered Jun 29 '17 at 17:05

2

Your issue is that the new element you are making is just a pointer to the original div. So when you update the id you are updating the same memory location which applies to both your divs. You need to make a deep copy by using .clone(). I believe all you need to do is modify your second line like this:

var div = document.createElement("div");

 div  = document.getElementById("1").clone();
 var id = 2;

div.setAttribute("id", id);

document.getElementById(parent1).innerHTML = div.outerHTML;

answered Jun 29 '17 at 17:05

Svit

311
3
7

Uncaught TypeError: document.getElementById(...).clone is not a function – Ng21 Jun 29 '17 at 17:12
I just realized my solution relies on you using JQuery. As the `.clone()` method is part of that api. @jack 's solution is better for you because he uses `cloneNode()` which does not rely on JQuery. – Svit Jun 29 '17 at 17:17

score 1 · Accepted Answer · answered Jun 29 '17 at 17:04

1

First: IDs in HTML can't start with a digit. Not technically valid. Might not cause issues right now, but it will if you try to use those ids for things like hash links. If you need to iterate, just throw some text in front. (div-1, div-2, whatever).

As for duplicating the div, you can use cloneNode.

var parentDiv = document.getElementById('parent'),
    templateDiv = document.getElementById('div-1');
    
var newDiv = templateDiv.cloneNode(true);
newDiv.id = 'div-2';
parentDiv.appendChild(newDiv);

/* here's a neat way to see an attribute without inspecting the html */

div div:after {
content: attr(id);
display: inline-block;
margin-left: 2em;
font-family: monospace;
}

<div id="parent">
   <div id="div-1" style="color: green;">Existing div</div>
</div>

answered Jun 29 '17 at 17:04

jack

2,894
1
13
23

_"IDs in HTML can't start with a digit. Not technically valid."_ That's not true for HTML5 (https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html/31773673#31773673) – Andreas Jun 29 '17 at 17:08
brilliant JACK you – Ng21 Jun 29 '17 at 17:24
you are a star! – Ng21 Jun 29 '17 at 17:24
@Andreas Huh! That's news to me. I'd still say avoid them; just recently I was working on a project that involved smooth-scrolling to hash links, and the script couldn't handle IDs that started with numbers. It's possible that was just that particular script, but I'm not sure. – jack Jun 29 '17 at 19:58

Create new div with exact same inner and outer HTML as existing div, but different id with Javascript

2 Answers2