{"id":26880,"date":"2024-03-16T07:31:20","date_gmt":"2024-03-16T07:31:20","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/"},"modified":"2024-03-22T09:40:05","modified_gmt":"2024-03-22T09:40:05","slug":"introduction-to-using-clonenode-in-javascript-to-copy-nodes","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/","title":{"rendered":"Introduction to using cloneNode() in JavaScript to copy nodes"},"content":{"rendered":"<p>cloneNode() is a method in JavaScript that is used to copy a node. It can be used to create a copy of a node without affecting the original node.<\/p>\n<p>The cloneNode() method has an optional boolean parameter deep, with a default value of false. When deep is false, only the current node will be copied, without its children. When deep is true, the children will also be copied along with the current node.<\/p>\n<p>The cloneNode() method returns a new node object that can be inserted into other parts of the document using methods like appendChild() or insertBefore().<\/p>\n<p>Here is an example of how to use the cloneNode() method:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">var<\/span> originalNode = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"original\"<\/span>);\r\n<span class=\"hljs-keyword\">var<\/span> clonedNode = originalNode.<span class=\"hljs-title function_\">cloneNode<\/span>(<span class=\"hljs-literal\">true<\/span>); <span class=\"hljs-comment\">\/\/ \u62f7\u8d1d\u8282\u70b9\u53ca\u5176\u5b50\u8282\u70b9<\/span>\r\n\r\n<span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-property\">body<\/span>.<span class=\"hljs-title function_\">appendChild<\/span>(clonedNode); <span class=\"hljs-comment\">\/\/ \u5c06\u62f7\u8d1d\u7684\u8282\u70b9\u63d2\u5165\u5230body\u4e2d<\/span>\r\n<\/code><\/pre>\n<p>In the above example, the node with the id &#8220;original&#8221; is first retrieved using the getElementById() method. Then, the cloneNode() method is used to copy this node and insert the copied node into the body of the document.<\/p>\n<p>Please note that the cloneNode() method only copies the attributes and values of the node itself, not event handlers. If you need to copy event handlers, you can use the addEventListener() method to attach them to the cloned node.<\/p>\n<p>Furthermore, the cloneNode() method can only be used to duplicate DOM nodes and not other non-DOM objects like JavaScript objects.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>cloneNode() is a method in JavaScript that is used to copy a node. It can be used to create a copy of a node without affecting the original node. The cloneNode() method has an optional boolean parameter deep, with a default value of false. When deep is false, only the current node will be copied, [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-26880","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introduction to using cloneNode() in JavaScript to copy nodes - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to using cloneNode() in JavaScript to copy nodes\" \/>\n<meta property=\"og:description\" content=\"cloneNode() is a method in JavaScript that is used to copy a node. It can be used to create a copy of a node without affecting the original node. The cloneNode() method has an optional boolean parameter deep, with a default value of false. When deep is false, only the current node will be copied, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T07:31:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T09:40:05+00:00\" \/>\n<meta name=\"author\" content=\"Ava Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ava Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/\"},\"author\":{\"name\":\"Ava Mitchell\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\"},\"headline\":\"Introduction to using cloneNode() in JavaScript to copy nodes\",\"datePublished\":\"2024-03-16T07:31:20+00:00\",\"dateModified\":\"2024-03-22T09:40:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/\"},\"wordCount\":214,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/\",\"name\":\"Introduction to using cloneNode() in JavaScript to copy nodes - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T07:31:20+00:00\",\"dateModified\":\"2024-03-22T09:40:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to using cloneNode() in JavaScript to copy nodes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\",\"name\":\"Ava Mitchell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"caption\":\"Ava Mitchell\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introduction to using cloneNode() in JavaScript to copy nodes - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to using cloneNode() in JavaScript to copy nodes","og_description":"cloneNode() is a method in JavaScript that is used to copy a node. It can be used to create a copy of a node without affecting the original node. The cloneNode() method has an optional boolean parameter deep, with a default value of false. When deep is false, only the current node will be copied, [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T07:31:20+00:00","article_modified_time":"2024-03-22T09:40:05+00:00","author":"Ava Mitchell","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Ava Mitchell","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/"},"author":{"name":"Ava Mitchell","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64"},"headline":"Introduction to using cloneNode() in JavaScript to copy nodes","datePublished":"2024-03-16T07:31:20+00:00","dateModified":"2024-03-22T09:40:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/"},"wordCount":214,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/","url":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/","name":"Introduction to using cloneNode() in JavaScript to copy nodes - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T07:31:20+00:00","dateModified":"2024-03-22T09:40:05+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/introduction-to-using-clonenode-in-javascript-to-copy-nodes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introduction to using cloneNode() in JavaScript to copy nodes"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64","name":"Ava Mitchell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","caption":"Ava Mitchell"},"url":"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/26880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=26880"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/26880\/revisions"}],"predecessor-version":[{"id":61074,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/26880\/revisions\/61074"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=26880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=26880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=26880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}