javascript - 如何克隆一个元素？

Question

我已经制作了一个脚本来克隆 js 中的元素，但这只选择了第一个元素。这是代码:

 function clone(sel) {
     var rVxyz = document.querySelector(sel);
     var rVabc = rVxyz.cloneNode(true);
     document.body.appendChild(rVabc) || 
     document.documentElement.appendChild(rVabc);
 };

是的，我知道我使用过 querySelector，但我无法将它与 querySelectorAll 一起使用。我写了这样的东西:

function clone(sel, num) {
    var rVxyz = document.querySelectorAll(sel)[num];
    var rVabc = rVxyz.cloneNode(true);
    document.body.appendChild(rVabc) || 
    document.documentElement.appendChild(rVabc);
};

这仅在 num = 0 时有效，否则无效。

提前致谢。

Answer 1

这将取决于您将什么作为 sel 传递给您的函数。如果你传递一个元素的 id，像这样:#someID，rVxyz 中只能有 0 个元素或 1 个元素作为 id s 必须是唯一的。因此，您无法克隆该元素，除非您包含一些代码来更改 ID，在这种情况下，无论如何它都不是真正的克隆。

当然，如果您按类别选择，通过将类似.someClass 的内容传递给sel，那么可以有任意数量的元素，从0 到n。

老实说，我认为克隆所有匹配元素比尝试将索引传递给您的函数更有意义。所以 clone() 将使用 forEach 代替。

function clone(sel) 
{
    var rVxyz = document.querySelectorAll(sel);
    rVxyz.forEach(function(element) {
         let rVabc = element.cloneNode(true);
         document.body.appendChild(rVabc) || 
         document.documentElement.appendChild(rVabc);
    });
};
 clone("#biz");                 
 clone(".boi");
 clone(".boi:nth-child(2)"); 

用于测试的 HTML:

<div id="biz"><p>1 Unique thing</p></div>
<div class="boi"><p>2 hi</p></div>
<div class="boi"><p>hello there</p></div>

输出是:

1 独特的事物

2 你好

3 你好

2 你好

3 你好

2 你好

第一个元素没有被克隆，因为 ID 必须是唯一的。另外，请注意在对 clone() 的第二次调用中，我使用了第 n 个子选择器，因此只有每个父元素中的第二个匹配元素被克隆。这样做的好处是，如果需要，您甚至可以选择第二个、第三个、第四个等元素。

只要元素在同一个父容器元素中，这就有效。

这是一些 more info about nth-child .

但是如果您真的想克隆第 n 个匹配项，您原来的方法也可以工作。例如。第二场比赛。您只需要检查您是否超出了 NodeList rVxyz 的末尾。

   function clone(sel, num) 
    {
       var rVxyz = document.querySelectorAll(sel);
       var limit = rVxyz.length;
       if (num < limit)
       {
          var rVabc = rVxyz[num].cloneNode(true);
          document.body.appendChild(rVabc) || 
          document.documentElement.appendChild(rVabc);
       }
      else
      {
         console.log(limit);//Do nothing or output error message here.
      }
    };

 clone(".boi", 1);

这只会克隆第二个匹配元素，只要找到 2 个或更多元素即可。