How can i create a new card by clicking on a button (js)?

Question

I am new to javascript. The button i wanna make should add every single time clicking it a new card to my web page. Unfortunatly my code does not work. Can you guys help me?

My Code: 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 Code :

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

Answer 1

Do it like this

 <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>

You need to create the element through JS and append it to the document

Answer 2

This is another way to solve it:

 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

Try it :

$(document).ready(function(){

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

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

    })

})

This is Demo : UpdatedDemo