By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,776 Members | 1,397 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,776 IT Pros & Developers. It's quick & easy.

cloning objects and CSS id of cloned element

P: n/a
abs
Hi all.
I use such code to clone blocks:

element = document.getElementById(IdOfElement)
element = element.cloneNode(true)
new_element = document.getElementById(IdOfElement).appendChild(e lement)

Anybody knows how to set id for the new element ? I mean the id which I coud
use in CSS stylesheet for setting css properties of new element.

Best regards,
ABS
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
abs wrote:
Hi all.
I use such code to clone blocks:

element = document.getElementById(IdOfElement)
element = element.cloneNode(true)
new_element = document.getElementById(IdOfElement).appendChild(e lement)

Anybody knows how to set id for the new element ? I mean the id which I coud
use in CSS stylesheet for setting css properties of new element.

Best regards,
ABS

This will work

element = document.getElementById(IdOfElement)
element = element.cloneNode(true)
element.id = 'newID'; //<- ID Assignment
new_element = document.getElementById(IdOfElement).appendChild(e lement)

HTH

Regards,
N Demos

=== Example Code ===

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
<HTML>
<HEAD>
<TITLE>CloneTest</TITLE>
<SCRIPT language="javascript" type="text/javascript">
<!--
function cloneAndInsert(IdOfElement)
{
element = document.getElementById(IdOfElement);
element = element.cloneNode(true);
element.id = 'new' + element.id;

new_element = document.getElementById(IdOfElement).appendChild(e lement);
return true;
}
// -->
</SCRIPT>
<STYLE type="text/css">
BODY {
background-color: #000000;
color: #FFFFFF;
}
A {
display: inline;
border-style: solid;
border-color: #0000AA;
border-width: 4px;
background-color: #0000FF;
padding: 5px 10px 5px 10px;
vertical-align: middle;
}
A:link {
color: #FF0000;
}
A:visited {
color: #800000;
}
A:hover {
border-style: outset;
color: #00FF00;
}
A:active {
border-style: inset;
color: #FF00FF;
}

#div1 {
border-style: outset;
border-color: #00FF00;
border-width: 2px;
background-color: #FF0000;
color: #000000;
}
#newdiv1 {
border-style: inset;
border-color: #AAAAFF;
border-width: 2px;
background-color: #0000FF;
color: #FFFFFF;
}
</STYLE>
</HEAD>

<BODY>
<DIV id="div1">
<P>A Paragraph</P>
<P>Another Paragraph</P>
</DIV>
<BR>
<A href='javascript:' onClick="cloneAndInsert('div1');">Click Here</A>
</BODY>
</HTML>
--
Change "seven" to a digit to email me.
Jul 23 '05 #2

P: n/a
abs
N. Demos wrote:
This will work [...]


It works ! Thank you for quick response.

Regards.
Jul 23 '05 #3

P: n/a
abs wrote:
I use such code to clone blocks:

element = document.getElementById(IdOfElement)
element = element.cloneNode(true)
new_element = document.getElementById(IdOfElement).appendChild(e lement)


Wouldn't

var element = document.getElementById(id),
newElement = element.cloneNode(true);

element.appendChild(newElement);

be a more sensible pattern? Anyway, as already indicated, placing

newElement.id = 'new-id';

before the appendChild call allows one to assign an id to the new element.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.