cloneNode method
Copies a reference to the object from the document hierarchy.
![]() |
Syntax
object.cloneNode(fDeep)Parameters
- fDeep [in, optional]
-
Type: Boolean
Boolean that specifies one of the following values:
-
Cloned objects do not include childNodes.
-
Cloned objects include childNodes.
Return value
Type: IHTMLDOMNode
Returns a reference to the newly created node.Standards information
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.
cloneNode does not work on an IFRAME directly. You must call cloneNodethrough the all collection. The following example demonstrates how to call cloneNode on an IFRAME.
<!DOCTYPE html>
<html>
<head>
<title><iframe></title>
</head>
<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>
<script>
function fnBegin() {
var fr = document.all.oFrame.cloneNode();
console.log(document.body.innerHTML);
}
</script>
</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.
Examples
<!DOCTYPE html> <html> <head> <title>Clone</title> </head> <body> <ul id="oList"> <li>List node 1</li> <li>List node 2</li> <li>List node 3</li> <li>List node 4</li> </ul> <input type="button" value="Clone List" onclick="fnClone()"> <script> function fnClone() { /* the 'true' possible value specifies to clone the childNodes as well. */ var oCloneNode = document.getElementById('oList').cloneNode(true); /* When the cloned node is added, 'oList' becomes a collection. */ document.body.insertBefore(oCloneNode); } </script> </body> </html>
See also
- a
- abbr
- acronym
- address
- applet
- area
- article
- aside
- attribute
- b
- base
- baseFont
- bdo
- bgSound
- big
- blockQuote
- body
- br
- button
- caption
- center
- cite
- code
- col
- colGroup
- comment
- dd
- del
- dfn
- dir
- div
- dl
- documentType
- dt
- em
- embed
- fieldSet
- figcaption
- figure
- font
- footer
- form
- frame
- frameSet
- head
- header
- hgroup
- hn
- hr
- html
- i
- iframe
- img
- input type=button
- input type=checkbox
- input type=email
- input type=file
- input type=hidden
- input type=image
- input type=number
- input type=password
- input type=radio
- input type=range
- input type=reset
- input type=search
- input type=submit
- input type=tel
- input type=text
- input type=url
- ins
- kbd
- label
- legend
- li
- link
- listing
- map
- mark
- marquee
- menu
- nav
- nextID
- object
- ol
- option
- p
- plainText
- pre
- ProcessingInstruction
- q
- s
- samp
- script
- section
- select
- small
- span
- strike
- strong
- sub
- sup
- table
- tBody
- td
- textArea
- tFoot
- th
- tHead
- title
- tr
- tt
- u
- ul
- var
- xmp
- Reference
- appendChild
- removeNode
- replaceNode
- swapNode
