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中如何用更少的代码创建多个克隆，或者不添加更多的cloneNode方法，如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

You can use a loop structure like this:

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

You don´t need clone()-Method here and your var imgElement is already a jQuery-Object. So you don´t need the $() either,

在javascript中如何使用较少的代码创建多个克隆，如jQuery中的clone（）方法

3 个答案: