如何通過單擊按鈕（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