javascript - 动态添加新的boostrap 4卡

Question

我会在 js 中知道如何动态添加新卡。下面的代码允许删除卡但不能添加新卡。

我开始了类似的事情，但我被阻止了。

html代码示例

卡片

<div class="container">
    <div class="row">
        <button type="button" class="btn btn-primary" aria-label="Insert" onClick="addAnother()" id="insert">
            <span aria-hidden="true">Insert</span>
        </button>
    </div>
     <div class="row"> 
        <ul class="row list-unstyled" id="list">
            <li class="col-md-4" id="element1">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
                        <p class="card-text">Some example text. Some example text.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </li>
            <li class="col-md-4" id="element2">
            <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
                        <p class="card-text">Some example text. Some example text.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </li>
            <li class="col-md-4" id="element1">                
            <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
                        <p class="card-text">Some example text. Some example text.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </li>
         </ul>
      </div>
 </div>
</body>

脚本>

取出卡片

<script type="text/javascript">
    $('.close').click(function(){
    var $target = $(this).parents('li');
    $target.hide('slow', function(){ $target.remove(); });
    })

</script>

添加卡==>这是元素不正确必须包含我认为的卡代码

<script>
    addAnother = function() {
        var ul = document.getElementById("list");
        var li = document.createElement("li");
        var children = ul.children.length + 1
        li.setAttribute("id", "element"+children)
        li.appendChild(document.createTextNode("Element "+children));
        ul.appendChild(li)
    }
</script>

标签： javascriptbootstrap-4

Answer 1

您可以使用 id #insert附加单击事件，就像使用关闭操作一样，而不是引用内联函数。

 $('#insert').click(function(){

     $( "ul#list" ).append( "<li>any html here</li>" );

});