如何使用jquery动态添加按钮

我的任务是动态添加按钮到div ..这是我按照动态添加按钮的代码，但它不工作请给我一个解决方案

     function test() { var r = "$('').attr({ type: "button", id: "field" })"; } $("body").append(r);    Insert after   

代码在页面加载时在div上附加按钮但不起作用

       function test() { var r=$('').attr({ type: "button", id: "field" }); test().append("#test"); }    
 Insert after   

Answer 1

您的追加行必须在test()函数中

编辑：

这是两个版本：

版本1：jQuery监听器

 $(function(){ $('button').on('click',function(){ var r= $(''); $("body").append(r); }); }); 

在这里演示

版本2：使用函数（如您的示例）

 function createInput(){ var $input = $(''); $input.appendTo($("body")); } 

在这里演示

注意：这个可以使用.appendTo或.append来完成。

Answer 2

$("body").append(r)语句应该在test函数内，也有错误的"在test方法中

 function test() { var r=$('').attr({ type: "button", id: "field", value: 'new' }); $("body").append(r); } 

演示： 小提琴

更新
在这种情况下尝试更多的jQuery-ish解决方案

        Insert after   

演示： Plunker

Answer 3

试试这个：

Answer 4

动态添加动态按钮;

        Insert after
   

演示链接

Answer 5

试试这个

 function test() { $("body").append(""); } 

Answer 6

在这里工作。

要仅添加一次新输入，请使用以下代码：

 $(document).ready(function() { $("#insertAfterBtn").one("click", function(e) { var r = $('', { type: "button", id: "field", value: "I'm a button" }); $("body").append(r); }); }); 

[…这里剥离的来源……]

  Insert after  

[…这里剥离的来源……]

要使它在w3编辑器中工作，请将下面的代码复制/粘贴到w3编辑器中的“源代码”部分，然后点击“提交代码”：

       Insert only one button after