Javascript 用一个按钮有效地创建新元素

我正在尝试创建可打印的宝丽来模板，但我对某些元素有问题，我有如下贴纸容器：

     <div class="sticker-container">
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (1).gif"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (2).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (3).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (4).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (5).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (6).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (7).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (8).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (9).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (10).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (11).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (12).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (13).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (14).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (15).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (16).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (17).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (18).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (19).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (20).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (21).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (22).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (23).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (24).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (25).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (26).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (27).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (1).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (2).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (3).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (4).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (5).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (6).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (7).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (8).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (9).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (10).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (11).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (12).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (13).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (14).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (15).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (16).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (17).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (18).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (19).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (20).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (21).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (22).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (23).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (24).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (25).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (26).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (27).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (28).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (29).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (30).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (31).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (32).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (33).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (34).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (35).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (36).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (37).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (38).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (39).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (40).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (41).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (42).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (43).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (44).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (45).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (46).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (47).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (48).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (49).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (50).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/1.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/2.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/3.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/4.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/5.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/6.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/7.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/8.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/9.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/10.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/11.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/12.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/13.gif"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/14.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/15.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/16.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/17.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/18.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/19.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/20.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/21.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/22.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/23.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/24.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/25.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/26.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/27.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/28.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/29.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/30.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/31.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/32.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/33.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/34.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/35.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/36.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/37.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/38.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/39.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/40.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/41.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/42.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/43.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/44.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/45.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/46.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/47.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/48.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/49.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-2/50.png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (1).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (2).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (3).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (4).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (5).png"/></div>
      <div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (6).png"/></div>
    </div>

但是它只会显示一个我写的图像。append，如何在不创建jquery的情况下有效地实现这一点

更新

整页。正如您在代码中看到的：

    var counter = 0;
      $('.sticker').on("click", function() {
        $('.cutting-container').append("<div class='sticker-body'><img src='ssts/img/overlay-3/Emoji Face by Waatt (6).png'/></div>");
        $('.sticker-body').draggable({
          containment: $('.polaroid')
        });
      });`

    var counter = 0;
      $('.sticker').on("click", function() {
        $('.cutting-container').append("<div class='sticker-body'><img src='ssts/img/overlay-3/Emoji Face by Waatt (6).png'/></div>");
        $('.sticker-body').draggable({
          containment: $('.polaroid')
        });
      });

它将在宝丽来的容器上创造一种新的元素，称为“贴纸体”，并在里面附加图像。我有一个名为“贴纸”的类，用于贴纸图像，我想要的是当我单击带有ex:image-1的贴纸类时，它将显示图像-1，如果它是另一个贴纸类，它将显示图像-2

---

如果我对每个类使用id，如何在不创建jquery每个id*的情况下更有效地创建它？所以我不应该创建太多的“append”代码。谢谢

如果我正确理解了你的问题，你有一堆贴纸，用户可以从模板容器中选择并将它们添加到另一个div

以下是我所做的：

我做了一个新物体。所以你要处理一个全新的对象。 我把它做成拖拉的。 var计数器=0； $'.sticker'.onclick，函数{ 让$sticker=$$this.html；//使用克隆对象，以防要删除它。 $“.切割容器”。附加$标签； $sticker.draggable{ 包含：$'.Polarioid' };

---

};你能为它制作一把小提琴吗？贴纸图像和切割容器图像是如何联系在一起的？@AlexandruIonutmihai完整的页面截图就足够了吗？因为我一点也写不出来。@Satpal切割容器是用于html2canvas的，所以不要介意。。贴纸主体在哪里？这个课程是为了让贴纸绝对化，并将在宝丽来内部克隆，你的代码让贴纸显示在宝丽来外部，你能帮我修复一下吗？thanksI尝试在append中使用贴纸主体，但它显示的是[object object]，而不是我创建的单击对象的图像。克隆后如何调整其大小？它显示完整的页面图片谢谢，我做到了，谢谢你的帮助我只需要在html中添加div谢谢先生：D