Question

我有一个场景，我需要在按钮点击时显示DIV元素，如果用户再次点击该按钮，我需要两次显示相同的DIV元素，依此类推，用户点击按钮的次数。以下是DIV元素

                <div class="input-group" id="selection">
                  <span class="input-group-addon">
                    <i class="icon wb-menu" aria-hidden="true"></i>
                  </span>
                  <select class="show-tick" data-plugin="select2" >

                   <option>True</option>
                   <option>False</option>

                  </select>
                </div>

以下是按钮

<button class="btn btn-primary" 
              type="button" style="margin-left: 30px;">Add new selection</button>

Answer 1

您可以使用.clone()，

$(".btn").click(function () {
    var div = $(".input-group").last();
    div.after(div.clone());
});

Fiddle

clone()将获得指定元素的副本。然后，您可以使用last() or before()将元素添加到dom。

如果你有这个div元素的容器，那么你也可以使用append()

Answer 2

如果您想拥有div的完全副本，则可以使用clone。如果是动态div，您可以考虑使用append

之类的ListView

Answer 3

你是说这样的话吗？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
       $("#btn").click(function(){
        $("ol").append("<select class='show-tick'><option>True</option><option>False</option></select><br>");
    });
});
</script>
</head>
<body>

<ol>
  <div class="input-group" id="selection">
                  <span class="input-group-addon">
                    <i class="icon wb-menu" aria-hidden="true"></i>
                  </span>
                  <select class="show-tick" data-plugin="select2" >

                   <option>True</option>
                   <option>False</option>

                  </select>
                </div>
</ol>

<button id="btn">Append list item</button>

</body>
</html>

单击按钮时的动态DIV元素

3 个答案: