在javascript中如何使用較少的代碼創建多個克隆，如jQuery中的clone（）方法

Question

jQuery中的clone()方法：

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中如何使用更少的代碼創建多個克隆，或者不添加更多clone()方法，如jQuery中的clone()方法。

Answer 1

由於您要在HTML頁面中添加3個新元素，因此無論如何都需要創建3個新元素或克隆它們。 您可以簡單地指示jQuery每次都生成一個新元素，而不是創建一個元素並克隆它：

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

它將創建3個新的DOM元素並將它們附加到相應的元素。

Answer 2

這個怎么樣？

var img = $('<img src="img.png"/>');

$(img.clone()).appendTo('#ulSelector1 li');
$(img.clone()).appendTo('#ulSelector2 li');
$(img.clone()).appendTo('#ulSelector3 li');

Answer 3

你可以使用這樣的循環結構：

 for(var i = 0; i<4;i++){
     var img =  $('<img src="img.png"/>');
     img.appendTo('#ulSelector'+i + ' li');
 }

你不需要clone() - var imgElement這里你的var imgElement已經是一個jQuery-Object。 所以你也不需要$() ，