JS复制一个div - Javascript

在编写web页面时，有时候需要复制一个<div>元素并在页面中添加一份完全相同的拷贝，这时候就需要使用JavaScript。

以下是复制一个<div>元素的两种方法：

方法一：使用cloneNode()方法

const originalDiv = document.getElementById("originalDiv");
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);

以上代码会复制一个id为originalDiv的<div>元素，并将其添加到页面的最后。

解释

首先，使用document.getElementById()方法获取要复制的原始<div>元素。然后，使用cloneNode()方法复制这个元素。参数true表示同时复制<div>的子元素。如果参数为false，则只复制<div>本身，而不会复制子元素。

最后，使用document.body.appendChild()方法将复制出的元素添加到页面中。

方法二：使用innerHTML属性

const originalDiv = document.getElementById("originalDiv");
const clonedDiv = document.createElement("div");
clonedDiv.innerHTML = originalDiv.innerHTML;
document.body.appendChild(clonedDiv);

以上代码也会复制一个id为originalDiv的<div>元素，并将其添加到页面的最后。

解释

首先，使用document.getElementById()方法获取要复制的原始<div>元素。然后，使用document.createElement()方法创建一个新的<div>元素。

接着，将原始<div>元素的innerHTML属性赋值给新的<div>元素的innerHTML属性。这将复制原始元素的所有子元素。

最后，使用document.body.appendChild()方法将复制出的元素添加到页面中。

以上两种方法均可实现复制<div>元素的效果。根据实际需求选择合适的方法即可。