Does anyone know how to dynamically add a new card using JavaScript? The code provided allows for the removal of a card, but not the addition of a new one.
I attempted to start something like this, but I am currently stuck.
An example of the HTML code:
The card
<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>
The script for removing a card:
Remove a card
<script type="text/javascript">
$('.close').click(function(){
var $target = $(this).parents('li');
$target.hide('slow', function(){ $target.remove(); });
})
</script>
Add a card ==> This element is not correct, it must include the card code instead, I believe
<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>