在前端开发中，我们经常需要操作网页上的 HTML 元素。有时候我们会想要复制一个 HTML 元素对象，然后进行一些改变，而不影响原来的元素。那么，在 JavaScript 中，我们可以实现这个功能吗？
答案
答案是：可以。但是，需要注意的是，HTML 元素对象并不是普通的 JavaScript 对象，它有自己的属性和方法，因此直接将其赋值给另一个变量是行不通的。但是，可以使用 cloneNode() 方法来创建一个元素副本，从而实现对元素对象的复制。
const original = document.getElementById('original-element');
const copy = original.cloneNode(true);cloneNode() 方法接受一个布尔类型的参数，表示是否同时复制元素的子元素。如果传入 false，则只复制当前元素，而不复制其子元素。
需要注意的是，使用 cloneNode() 方法只是创建了一个新的元素对象，它们之间并没有任何关联。也就是说，如果你修改了复制出来的元素，原来的元素不会受到影响。同样的道理，如果你修改了原来的元素，复制出来的元素也不会受到影响。
示例代码
下面是一个完整的示例代码，演示如何使用 cloneNode() 方法复制一个 HTML 元素对象。
-- -------------------- ---- -------
--------- -----
------
------
------------ ------- ------------
-------
------
---- ----------------------
---------- -----------
------
------- ------------------------------ ----------------
--------
-------- -------------- -
----- -------- - --------------------------------------------
----- ---- - -------------------------
--------------------------------
-
---------
-------
-------在这个示例中，我们首先创建了一个 div 元素，并给它指定了一个 id 属性。然后，在页面上放置了一个按钮，当用户点击这个按钮时，会调用 cloneElement() 函数来复制原来的元素，并将复制得到的元素添加到页面的末尾。
需要注意的是，这个示例中复制出来的元素只包含了一个 h1 子元素，因为我们在调用 cloneNode() 方法时传入了 true。如果你不想复制子元素，可以传入 false。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12247