使用JavaScript克隆元素

If you’ve read previous entries in this series or are familiar with JS, you’ll know that it is pretty straightforward to remove an element from a page with JavaScript. Given this HTML:

如果您已阅读本系列的上一篇文章或对JS熟悉，那么您会知道， 使用JavaScript从页面中删除元素非常简单。 鉴于此HTML ：

<h1>IF THE SUSPENSE DOESN’T KILL YOU
<span>SOMETHING ELSE WILL</span></h1>
<p id="open"><span>CLOSE ON GLASS VIALS</span> being lifted from a large medical refrigerator. Gloved hands slip them into a foam lined carry case. The vials are delicate. Filled with a cool blue liquid. The hands move quickly. Urgently.</p>
<p>Sleek, super hi—tech. The blinds are closed. Can’t tell if it’s day or night.</p>
<p>Typists type. Assistants assist.</p>
<p id="bees">Busy worker bees.</p>

In almost all modern browsers we can identify and remove the “bees” paragraph with:

在几乎所有现代浏览器中，我们可以通过以下方式识别和删除 “ bees”段落：

var bees = document.getElementById("bees");
bees.remove();

We could then move the “bees” paragraph to become the very first element in the page with the following:

然后，我们可以将“ bees”段落移动到页面中的第一个元素，其中包含以下内容：

document.body.insertBefore(bees, document.body.firstElementChild);

The DOM of the page would now be:

页面的DOM现在将是：

<p id="bees">Busy worker bees.</p>
<h1>IF THE SUSPENSE DOESN’T KILL YOU
<span>SOMETHING ELSE WILL</span></h1>
<p id="open"><span>CLOSE ON GLASS VIALS</span> being lifted from a large medical refrigerator. Gloved hands slip them into a foam lined carry case. The vials are delicate. Filled with a cool blue liquid. The hands move quickly. Urgently.</p>
<p>Sleek, super hi—tech. The blinds are closed. Can’t tell if it’s day or night.</p>
<p>Typists type. Assistants assist.</p>

This is the equivalent to “cut and paste” in JavaScript. But what if we identified “bees”, only to immediately place it as the first element? That should be the equivalent of “copy and paste” in JavaScript, right?

这等效于JavaScript中的“剪切和粘贴”。 但是，如果我们确定了“蜜蜂”，只有立即把它作为第一个元素？ 那应该等同于JavaScript中的“复制和粘贴”，对吗？

var bees = document.getElementById("bees");
document.body.insertBefore(bees, document.body.firstElementChild);

The answer is “nope”: this gives us the same result as before, moving the element from the end of the document to the beginning. bees is a live reference to an element, and what we do to it is reflected directly in the DOM.

答案是“不”：这将为我们提供与以前相同的结果，将元素从文档末尾移至开头。 bees是对元素的实时引用 ，我们对它所做的工作直接反映在DOM中 。

You might think that we could create a new variable based on bees, and substitute that:

您可能会认为我们可以基于bees创建一个新变量 ，并将其替换为：

var bees = document.getElementById("bees");
var swarm = bees;
document.body.insertBefore(swarm, document.body.firstElementChild);

But that doesn’t work either: JavaScript considers bees exactly equivalent to swarm, and as referring to the same object, so the result is the same as before: the element is moved from point A to point B. What we need is a clone of the original object.

但这也不起作用：JavaScript认为bees完全等于swarm ，并且引用了同一对象，因此结果与之前相同：该元素从A点移到B点。我们需要一个克隆原始对象。

var bees = document.getElementById("bees");
var swarm = bees.cloneNode(true);
document.body.insertBefore(swarm, document.body.firstElementChild);

Now the result is what we expect: a copy of bees at the start and end of the document.

现在的结果就是我们所期望的：在文档的开头和结尾处都有bees的副本。

cloneNode (cloneNode)

cloneNode makes exact duplicates of nodes, and has just one option: true or false. If true, cloneNode will include a copy of all the children from the original node. In the case of our example, true was necessary in order to gain a copy of the text of the paragraph, not just the markup.

cloneNode精确复制节点，只有一个选项： true或false 。 如果为true ，则cloneNode将包括原始节点中所有子节点的副本。 在我们的示例中，为获得段落文本的副本而不仅仅是标记是必要的，必须为true 。

With the true option cloneNode copies everything from the original node: applied styles, text, images, even JavaScript references (with the exception of any applied addEventListener). This exact duplication can lead to some issues, as we’ll see in a moment.

使用true选项， cloneNode复制原始节点中的所有内容 ：应用的样式，文本，图像，甚至JavaScript引用(任何应用的addEventListener除外)。 稍后我们将看到，这种精确的重复会导致一些问题。

表里不一 (Duplicity)

One issue in our example is that we now have an exact duplicate of the original node, including its id:

我们的示例中的一个问题是，我们现在具有原始节点的精确副本， 包括其id ：

<p id="bees">Busy worker bees.</p>
…
<p id="bees">Busy worker bees.</p>

This is bad: id attribute values should be unique references, and it’s very likely that our page will become deeply confused if we allow things to go on as they are. When creating node clones, you should be careful to check for and create new id values in the copies:

这很不好： id属性值应该是唯一的引用，并且如果我们允许事情继续进行，很有可能我们的页面会变得很混乱。 创建节点克隆时，应小心检查并在副本中创建新的id值：

var bees = document.getElementById("bees");
var swarm = bees.cloneNode(true);
swarm.id+= "copy";
document.body.insertBefore(swarm, document.body.firstElementChild);

In this case, we’ve concatenated the word copy to the original id value of the clone.

在这种情况下，我们将单词copy 连接到克隆的原始id值。

After we create them, clones go on to live their own lives: altering bees will not affect beescopy, and the reverse is also true: changes to clones do not affect their originals.

创建它们之后，克隆继续过自己的生活：改变bees不会影响beescopy ，反之亦然：克隆的更改不会影响其原始形式。

结论 (Conclusion)

cloneNode is an extremely useful method, allowing the web developer to quickly make multiple copies of almost anything and distribute them on the page. Then, those copies need to be manipulated… which is what this series will be looking at next.

cloneNode是一种非常有用的方法，它允许Web开发人员快速制作几乎所有内容的多个副本并将它们分发到页面上。 然后，需要对这些副本进行操作……这是本系列接下来的内容。

翻译自: https://thenewcode.com/1025/Cloning-Elements-with-JavaScript