cloneNode Method (Attr Constructor, A, ABBR, ...)

cloneNode Method

cloneNode Method

Copies a reference to the object from the document hierarchy.

Syntax

oClone = object.cloneNode( [bCloneChildren])

Parameters

bCloneChildren Optional. Boolean that specifies one of the following values:
FALSE
Cloned objects do not include childNodes.
TRUE
Cloned objects include childNodes.

Return Value

Returns a reference to the newly created node.

Remarks

The cloneNode method copies an object, attributes, and, if specified, the childNodes.
When you refer to the ID of a cloned element, a collection is returned.
cloneNodedoes not work on an IFRAME directly. You must call cloneNodethrough the all collection. The following example demonstrates how to call cloneNode on an IFRAME.
<HTML>
<SCRIPT>
function fnBegin(){
    var fr = document.all.oFrame.cloneNode();
    alert(document.body.innerHTML);
}    
</SCRIPT>
<BODY onload="fnBegin()">
    <IFRAME id="oFrame" src="about:blank" 
        style="border:1px solid black; position:absolute; top:20px; left:30px;
            width:350px; height:300px;"></IFRAME>
</BODY>    
</HTML>
If the object being cloned is an element and that element has expandos defined on it, the expandos are copied to the clone when cloneNode is called. Other browsers might handle this differently.
In Microsoft Internet Explorer 6, this method applies to the attribute object.

Example

<SCRIPT>
function fnClone(){
   /* the 'true' possible value specifies to clone
      the childNodes as well.
   */
   var oCloneNode = oList.cloneNode(true);
   /* When the cloned node is added,
   'oList' becomes a collection.
   */
   document.body.insertBefore(oCloneNode);
}
</SCRIPT>

<UL ID="oList">
<LI>List node 1
<LI>List node 2
<LI>List node 3
<LI>List node 4
</UL>

<INPUT type="button" value="Clone List" onclick="fnClone()">

Standards Information

This method is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 .

Applies To

Attr Constructor, A, ABBR, ACRONYM, ADDRESS, APPLET, AREA, attribute, B, BASE, BASEFONT, BDO, BGSOUND, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, FRAMESET, HEAD, hn, HR, HTML, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, LINK, LISTING, MAP, MARQUEE, MENU, nextID, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR, XMP, Element Constructor, HTMLDocument Constructor, Text Constructor

See Also

appendChild, removeNode, replaceNode, swapNode

Tags

: Add a tag

Community Content

Add new content

Annotations

You might need some tricks for deep-cloning (with bCloneChildren)

Timothy Madden ... John Sudds | Edit | Show History

From my experience deep-cloning an <option> element will only clone the start and end tags of the option, without the content.
So I suggest you do

var new_option =source_option.cloneNode(true);
if (source_option.innerHTML && new_option.innerHTML != source_option.innerHTML)
	new_option.innerHTML = source_option.innerHTML;

every time you want to deep clone (that is bCloneChildren) such an element. This way if it works it works, if not fall back to using innerHTML.

-- In my tests, both IE6 or IE7 perform as expected with cloneNode(true). Timothy, can you provide a scenario that will reproduce the behavior you describe? I will be happy to alert the product team if there is something we can fix. (jsudds)

Tags

: Add a tag

Flag as ContentBug

Scenario that deep cloning does not operate correctly.

Tyra Johnson | Edit | Show History

Heres is an example of the childnodes of the <object> tag not being cloned correctly.

***************************************************************************************

<div id="test">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="369" height="113">
<param name="movie" value="http://www.adobe.com/swf/software/flash/about/mini_FMA_about_01.swf">
<param name="quality" value="high">
<embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="369" height="113"></embed>
</object>
</div>
<div id="clonetest">

</div>
<script language="javascript" type="text/javascript">
clone=document.getElementById('test').cloneNode(true);

// Thanks Timothy Madden
// if(document.getElementById('test').innerHTML && clone.innerHTML != document.getElementById('test').innerHTML){
// clone.innerHTML = document.getElementById('test').innerHTML;
// }
document.getElementById('clonetest').appendChild(clone);
</script>

****************************************************************************************

Inspection using the IE Developer tools you will see that the clonetest div contains an object but does not have any parameters associated with it.

If you were to uncomment out the section in the javascript, the entire object will be properly cloned.

Hope this Help.

-Ty

Tags

: Add a tag

Flag as ContentBug

Issues cloning nodes... then attempting to change the name/type attribute

unique_username | Edit | Show History

Before IE8, cloning a node would clone the node, but changing the "name" or "type" attributes is not possible as they are readonly before IE8.

Thus previous to IE8 cloning form elements was of little use due to this limitation.

Tags

: issue (x) Add a tag

Flag as ContentBug