我如何通过点击一个按钮创建一个新的卡(js)

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

本文关键字：一个 js 创建 按钮 何通过      更新时间：2023-09-26

我是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")
};

试一试:

$(document).ready(function(){
$("button.plus").on("click",function(){
$("div:last").after("<div class=item><p>Title</p></div>");
    })
})

这是Demo: UpdatedDemo

像这样做

 <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创建元素并将其附加到文档

这是另一种解决方法:

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>

相关文章：