/    Sign up×
Community /Pin to ProfileBookmark

Duplicate a Div…

Copy linkTweet thisAlerts:
Mar 13.2008

All right, I need to know how to duplicate a div.

I have a style set (as shown below), and I call my div below that…
——-

<style type=”text/css”>
#red
{
z-index:1;
width:90px;
height:72px;
position:absolute;
top:251px;
left:26px;
}
</style>

<div id=”red” onclick=”moveObject(‘red’)”><img src=”Red_Car.gif”/></div>
——–

In the header of my file, I have the JavaScript to move the div and change the ID:
——–

function moveObject(whichcar)
{
var movecar=document.getElementById(whichcar);
movecar.style.top=’160px’;
movecar.style.left=’130px’;
document.getElementById(whichcar).id=’First’;
}

Now, I need to know how to DUPLICATE my div, not just move it… Does anyone have a suggestion? ?

(I really hope this makes sense!!!)

Thanks!
–Flashlite

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooMar 13.2008 — var movecarclone=document.getElementById(whichcar).cloneNode(true);

movecarclone.setAttribute('id','newid');

set the id of the clone before you add it to the document.

If any of the original div's child nodes have ids, they need to be changed as well.
Copy linkTweet thisAlerts:
@flashliteauthorMar 13.2008 — Okay... so how do you display the new div...

I haven't heard anything about Nodes, so I'm sort of confused with your example, could you give me some more details?

(Thank you SO much for replying!)

--Flashlite
Copy linkTweet thisAlerts:
@ZeroKilledMar 14.2008 — i guess you also has never heard of DOM. if so, then read this tutorial which explain what is, how it can help you, and the benefit of using it. http://www.w3schools.com/htmldom/default.asp

after you have cloned a node, as [B]mrhoo[/B] has shown previously, you need to append the new copy to the document. more precise, append the copy to another element. that is, another div, the body, head, a paragraph, whatever you like or need to. following [B]mrhoo[/B] sample, add the following line:

<i>
</i>document.body.appendChild(movecarclone);


this will append the new copy on the body at the most bottom section. that is, supposing you have this code:

[code=html]
<body>
...
<!-- lots of elements -->
...
</body>
[/code]

after appending the element, will result as:
[code=html]
<body>
...
<!-- lots of elements -->
...
<div ...>...</div></body>[/code]
×

Success!

Help @flashlite spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...