在此页

• 句法
• 范例
• 注意事项
• 规范
• 浏览器兼容性
• 相关话题

Node.cloneNode() method returns a duplicate of the node on which this method was called.

句法

let newClone = node.cloneNode([deep])
					

node

The node to be cloned.

newClone

The new node, cloned from node .

newClone has no parent and is not part of the document, 直到 it is added to another node that is part of the document (using Node.appendChild() or a similar method).

deep 可选 ^*

若 true ，那么 node and its whole subtree—including text that may be in child 文本 nodes—is also copied.

若 false , only node will be cloned. Any text that node contains is not cloned, either (since text is contained by one or more child 文本 nodes).

deep has no effect on empty elements (such as the <img> and <input> 元素)。

^* 注意： In the DOM4 specification (since Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)), the optional deep 自变量默认为 true .

This behavior has been changed in the latest spec! 尽管 deep it still optional, it now defaults to false .

You should always provide an explicit value for backward and forward compatibility.

• With Gecko 28.0 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3)), the console warned developers not to omit the argument.
• Starting with Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)), a shallow clone is defaulted instead of a deep clone.

范例

let p = document.getElementById("para1")
let p_prime = p.cloneNode(true)
					

注意事项

Cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners. It does not copy event listeners added using addEventListener() or those assigned to element properties (e.g., node .onclick = someFunction ). Additionally, for a <canvas> element, the painted image is not copied.

警告： cloneNode() may lead to duplicate element IDs in a document!

If the original node has an id attribute , and the clone will be placed in the same document, then you should modify the clone's ID to be unique.

名称 attributes may need to be modified also, depending on whether duplicate names are expected.

To clone a node to insert into a different document, use Document.importNode() 代替。

规范

规范	状态	注释
DOM The definition of 'Node.cloneNode()' in that specification.	实时标准
DOM (文档对象模型) 3 级核心规范 The definition of 'Node.cloneNode()' in that specification.	过时
DOM (文档对象模型) 级别 2 核心规范 The definition of 'Node.cloneNode()' in that specification.	过时	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
cloneNode	Chrome 1	Edge 12	Firefox 1	IE 6	Opera 7	Safari 1.1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0
deep 默认为 false	Chrome Yes	Edge 12	Firefox 29 29 13 — 29 注意事项 deep 默认为 true . No 注意事项 Before Firefox 13, deep was a required parameter.	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 29 29 14 — 29 注意事项 deep 默认为 true . No 注意事项 Before Firefox 14, deep was a required parameter.	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

完整支持

见实现注意事项。

元数据

• 最后修改： Jan 20, 2020

相关话题

1. DOM (文档对象模型)
2. 节点
3. 特性

   1. baseURI
   2. baseURIObject
   3. childNodes
   4. firstChild
   5. isConnected
   6. lastChild
   7. localName
   8. namespaceURI
   9. nextSibling
   10. nodeName
   11. nodePrincipal
   12. nodeType
   13. nodeValue
   14. outerText
   15. ownerDocument
   16. parentElement
   17. parentNode
   18. prefix
   19. previousSibling
   20. rootNode
   21. textContent
4. 方法

   1. appendChild()
   2. cloneNode()
   3. compareDocumentPosition()
   4. contains()
   5. getRootNode()
   6. getUserData()
   7. hasChildNodes()
   8. insertBefore()
   9. isDefaultNamespace()
   10. isEqualNode()
   11. isSameNode()
   12. isSupported()
   13. lookupNamespaceURI()
   14. lookupPrefix()
   15. normalize()
   16. removeChild()
   17. replaceChild()
   18. setUserData()
5. 继承：

   1. EventTarget
6. DOM 相关页面

   1. AbortController
   2. AbortSignal
   3. AbstractRange
   4. Attr
   5. ByteString
   6. CDATASection
   7. CSSPrimitiveValue
   8. CSSValue
   9. CSSValueList
   10. CharacterData
   11. ChildNode
   12. 注释
   13. CustomEvent
   14. DOMConfiguration
   15. DOMError
   16. DOMErrorHandler
   17. DOMException
   18. DOMImplementation
   19. DOMImplementationList
   20. DOMImplementationRegistry
   21. DOMImplementationSource
   22. DOMLocator
   23. DOMObject
   24. DOMParser
   25. DOMPoint
   26. DOMPointInit
   27. DOMPointReadOnly
   28. DOMRect
   29. DOMString
   30. DOMTimeStamp
   31. DOMTokenList
   32. DOMUserData
   33. Document
   34. DocumentFragment
   35. DocumentType
   36. 元素
   37. ElementTraversal
   38. Entity
   39. EntityReference
   40. 事件
   41. EventTarget
   42. HTMLCollection
   43. MutationObserver
   44. NodeFilter
   45. NodeIterator
   46. NodeList
   47. NonDocumentTypeChildNode
   48. ProcessingInstruction
   49. PromiseResolver
   50. 范围
   51. StaticRange
   52. 文本
   53. TextDecoder
   54. TextEncoder
   55. TimeRanges
   56. TreeWalker
   57. TypeInfo
   58. USVString
   59. UserDataHandler
   60. XMLDocument