How to Clone a Div and Change its ID with JavaScript?

To clone a div and change its id with JavaScript, we can use the cloneNode method on the div.

Then we can set the id property of the cloned element to set the ID.

For instance, we can write:

<div id='foo'>
  foo bar
</div>

to add the div.

Then we can clone the div by writing:

const div = document.getElementById('foo')
const clone = div.cloneNode(true);
clone.id = "foo2";
document.body.appendChild(clone);

We get the div with document.getElementById and assign it to div.

Then we call div.cloneNode with true to clone the div and assign it to clone.

We pass in true to do a deep clone.

Then we set clone.id to the ID of the cloned div.

And then we call document.body.appendChild with clone to add to the body.