javascript 使用jQuery在按钮单击时动态添加div

Add div dynamically on button click using jQuery

提问by user3667305

I want to add div structure everytime I click the button to add an address using jQuery

每次单击按钮添加地址时，我都想添加 div 结构，使用 jQuery

<div id="container">
      <div class="address">
           <div class="input-reg rb-item input-group">
                 <span class="input-group-addon">Address </span>
                 <input type="text" class="form-control" placeholder="Insert text here">
           </div>
           <div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div>
       </div>
</div>
<div align="center" style="margin-top: 10px"><button id="btnAddAddress" class="btn btn-warning btn-md" type="button">Add Address</button></div>

and this is what I've tried but not working

这是我尝试过但没有用的方法

<script type="text/javascript">
    $("#btnAddAddress").click(function () {
      $("#container").append('<div class="address"><div class="input-reg rb-item input-group"><span class="input-group-addon">Address </span><input type="text" class="form-control" placeholder="Insert text here"></div><div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div></div>');
    });
</script>

回答by Kartikeya Khosla

You have to enclose your jquery code inside $(document).ready()block as shown :-

您必须将 jquery 代码包含在$(document).ready()块中，如下所示：-

$(document).ready(function(){
  //Jquery code here
});

OR

或者

$(document).on('click', '#btnAddAddress', function() 
{...});

and lastly don't forget to add jquery library file on your page.

最后不要忘记在页面上添加 jquery 库文件。

Note :- Second answer should normally be used in case when we dynamically add html to the DOM otherwise use first answer.

注意：- 如果我们将 html 动态添加到 DOM，通常应使用第二个答案，否则使用第一个答案。

Working Demo

工作演示

回答by Suresh Ponnukalai

Your code is working fine here. Also I have simplified your code like below.

您的代码在这里工作正常。我也简化了你的代码，如下所示。

$("#btnAddAddress").click(function () {
     $("#container").append($(".address").html());
});

回答by Sreeraj

The code you provided will work with out any modifications, if the js code is written after the button. i.e.

如果 js 代码写在按钮之后，则您提供的代码无需任何修改即可工作。IE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
      <div class="address">
           <div class="input-reg rb-item input-group">
                 <span class="input-group-addon">Address </span>
                 <input type="text" class="form-control" placeholder="Insert text here">
           </div>
           <div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div>
       </div>
</div>
<div align="center" style="margin-top: 10px"><button id="btnAddAddress" class="btn btn-warning btn-md" type="button">Add Address</button></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    $("#btnAddAddress").click(function () {
      $("#container").append('<div class="address"><div class="input-reg rb-item input-group"><span class="input-group-addon">Address </span><input type="text" class="form-control" placeholder="Insert text here"></div><div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div></div>');
    });
</script>

Make sure that the button and jquery is loaded before your code is executed. The best option is provided by "Kartikeya".

确保在执行代码之前加载按钮和 jquery。“Kartikeya”提供了最佳选择。

回答by Ariadna

You need to add "return false;" at the end of click function.

您需要添加“返回假；” 在点击功能结束时。

$("#btnAddAddress").click(function () {
   $("#container").append('<div class="address"><div class="input-reg rb-item input-group"><span class="input-group-addon">Address </span><input type="text" class="form-control" placeholder="Insert text here"></div><div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div></div>');
   return false;
});

JSFiddle Example

JSFiddle 示例