Question

我对jquery和javascript很陌生。现在，我正在构建表单。用户应该能够通过一个按钮来广告一个新的人。我该怎么做？

$(document).ready(function() {
  $("#button1").click(function() {
    $(".container").append(".wrapper"); // How to insert the whole wrapper? 
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button id="button1">Ad one person </button>
  <div class="wrapper" id="person1">
    <input type="text" class="input" placeholder="Name" required>
    <input type="text" class="input" placeholder="Surename" required>
    <input type="date" class="input" placeholder="Birthday" required onfocus="(this.type='date')" onblur="(this.type='Birthday')">
  </div>
</div>

Answer 1

您需要像这样$(".container").append($(".wrapper").html());

添加整个html

$(document).ready(function(){
  $("#button1").click(function(){
    $(".container").append($(".wrapper").html());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button id="button1">Ad one person </button>
  <div class="wrapper" id="person1">
    <input type="text" class="input" placeholder="Name" required>
    <input type="text" class="input" placeholder="Surename" required>
    <input type="date" class="input" placeholder="Birthday" required onfocus="(this.type='date')" onblur="(this.type='Birthday')" >
  </div>
</div>

如何使用jquery / javascript追加具有不同输入类型的div？

1 个答案: