javascript - 单击按钮将一个 div 内容添加到另一个 div 时

Question

这是我的代码——

<div id="div1">

    this is div 1 

    <form class="thisformtobeaddeverytime">
    <!-- this form to be add on click #btn1 -->
    </form>

</div>

<div id="div2">

    this is div 2 

      <form class="thisformtobeaddeverytime">
             <!-- this form to be add on click #btn2 -->
      </form> 

</div>

<div id="showtheaddedform">

          //here my form will be push on click to button

</div>

<button type="button" id="btn1">Add the form1</button>
<button type="button" id="btn2">Add the form2</button>

// the click function in my js file are as -

$(document).on("click","#btn1",function(){
          $("#showtheaddedform").append($("#div1").html());
});
$(document).on("click","#btn2",function(){
          $("#showtheaddedform").append($("#div2").html()); 
 });   

现在的问题是——

单击#bun1 时，它会将#div1 的内容添加到#showtheaddedform 中(即表单属性和表单内的所有元素)，如

<div id="showtheaddedform">
      <form class="thisformtobeaddeverytime">
         <!-- this form to be add on click #btn1 -->
      </form>
</div>

但是当我点击#btn2 时，它只添加了表单中的元素，比如

  <div id="showtheaddedform">
     <!-- this form to be add on click #btn2 -->
  </div>

[注意:我没有编写任何类型的删除查询]

..任何想法，它是如何去除的!!!

Answer 1

您的两个按钮具有相同的 ID。还有语法错误

$(document).on("click","#btn1",function(){
      $("#showtheaddedform").append($("#div1").html());
 }

添加

); to it

DEMO

实际上，在单击第二个按钮时，Form 标记会附加到 div。但在 UI 中它不会显示，因为它没有任何标签或文本。尝试在其中提供一些文本或标签。它会起作用

编辑

Updated Fiddle