www.fgks.org   »   [go: up one dir, main page]
Welcome  |  Sign In
 | 
Click to Rate and Give Feedback
Methods
 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.
falseDefault. Cloned objects do not include childNodes.
trueCloned 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.

A collection is returned when you refer to the ID of a cloned element.

The cloneNode method does not work on an IFRAME directly. You must call the cloneNode method through 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 >
    <IFRAME id="oFrame" src="about:blank" 
        style="border:1px solid black; position:absolute; top:20px; left:30px;
            width:350px; height:300px;"></IFRAME>
</BODY>    
</HTML>

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" >

Standards Information

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

Applies To

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

See Also

appendChild, removeNode, replaceNode, swapNode
Tags What's this?: Add a tag
Community Content
 
Add Community Content
You might need some tricks for deep-cloning (with bCloneChildren)      Timothy Madden ... John Sudds - MSFT   |   Edit   |  
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 What's this?: Add a tag
Scenario that deep cloning does not operate correctly.      Tyra Johnson   |   Edit   |  

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 What's this?: Add a tag
© 2008 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker
DCSIMG