javascript - 在 javascript 中如何使用更少的代码创建多个克隆，例如 jQuery 中的 clone() 方法

Question

clone() jQuery 中的方法:

var imgElement = $('<img src="img.png"/>').clone();
        $(imgElement).appendTo('#ulSelector1 li');
    $(imgElement).appendTo('#ulSelector2 li');
    $(imgElement).appendTo('#ulSelector3 li');

所以我在 javascript 中尝试了 cloneNode() 方法:

var imgElement = document.createElement("img");
    imgElement.setAttribute("src", "img.png");
    imgElement.cloneNode(true);

    var selector1 = document.querySelector("#img1 li");
        selector1.insertBefore(imgElement, selector1[0]);
    var selector2 = document.querySelector("#img2 li");
        selector2.appendChild(imgElement);
    var selector3 = document.querySelector("#img3 li");
        selector3.appendChild(imgElement);

但是 cloneNode() 方法只创建一个克隆。 所以在 javascript 中，如何使用更少的代码或不添加更多的 cloneNode 方法(如 jQuery 中的 clone() 方法)来创建多个克隆。

Answer 1

由于您要将 3 个新元素附加到您的 HTML 页面，您无论如何都需要创建 3 个新元素或克隆它们。您可以简单地指示 jQuery 每次生成一个新元素，而不是创建一个元素并克隆它:

var pattern = '<img src="img.png"/>';
$(pattern).appendTo('#ulSelector1 li');
$(pattern).appendTo('#ulSelector2 li');
$(pattern).appendTo('#ulSelector3 li');

它将创建 3 个新的 DOM 元素并将它们附加到相应的元素。