如何通过单击按钮（js）创建新卡？

Question

我是javascript新手。 我想做的按钮应该每次单击一次，将新卡添加到我的网页上。 不幸的是，我的代码无法正常工作。 你们能帮我吗？

我的代码：html：

    <div class="plus">+</div>
 <button onclick="newPerson()" class="plus">
     <div class="item">
     <p>title</p>
 </div>
 </button>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>
<div class="item">
     <p>Title</p>
 </div>

javaScript代码：

function newPerson() {
document.getElementByClassName("item")
};

Answer 1

像这样做

 <div id = "main">
 //your same html code

 </div>

 <script>
function newPerson() {
var newdiv  = document.createElement('div');
newdiv.className+='item';

var newp = document.createElement('p');
newp.innerHTML = "TItle";

newdiv.appendChild(newp);
document.getElementById('main').appendChild(newdiv);
}
 </script>

您需要通过JS创建元素并将其附加到文档中

Answer 2

这是另一种解决方法：

 function newPerson() { $('#wrapper').append('<div class="item"><p>Title</p></div>') } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div class="plus">+</div> <button onclick="newPerson()" class="plus"> <div class="item"> <p>title</p> </div> </button> <div class="item"> <p>Title</p> </div> <div class="item"> <p>Title</p> </div> <div class="item"> <p>Title</p> </div> <div class="item"> <p>Title</p> </div> <div class="item"> <p>Title</p> </div> <div class="item"> <p>Title</p> </div> <div class="item"> <p>Title</p> </div> </div> 

Answer 3

试试吧 ：

$(document).ready(function(){

$("button.plus").on("click",function(){

$("div:last").after("<div class=item><p>Title</p></div>");

    })

})

这是演示： UpdatedDemo