How to add a button dynamically using jquery

Question

My task is to add button dynamically to the div.. here is the code that i follow to add button dynamically but its not working please give me a solution for this

<!DOCTYPE html>
    <html>
    <head>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script type="text/javascript">
             function test() {
                var r = "$('<input/>').attr({
                             type: "button",
                             id: "field"
                        })";
             }
             $("body").append(r);
         </script>
    </head>
    <body>
         <button onclick="test()">Insert after</button> 
    </body>
    </html>

code to append button on div when page loads but its not working

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function test() {
    var r=$('<input/>').attr({
        type: "button",
        id: "field"

    });
    test().append("#test");    
}
</script>
</head>
<body>
<div id="test"></div>
 <button id="insertAfterBtn" onclick="test()">Insert after</button>
</body>
</html>

Please refer to this answer stackoverflow.com/a/6205324/3530081 — Mahdi Alkhatib
– Mahdi Alkhatib, Commented Mar 30, 2016 at 14:52

Andrew Brooke · Accepted Answer · 2015-12-07 17:12:30Z

57

Your append line must be in your test() function

EDIT:

Here are two versions:

Version 1: jQuery listener

$(function(){
    $('button').on('click',function(){
        var r= $('<input type="button" value="new button"/>');
        $("body").append(r);
    });
});

DEMO HERE

Version 2: With a function (like your example)

function createInput(){
    var $input = $('<input type="button" value="new button" />');
    $input.appendTo($("body"));
}

DEMO HERE

Note: This one can be done with either .appendTo or with .append.

edited Dec 7, 2015 at 17:12

Andrew Brooke

12.2k8 gold badges41 silver badges56 bronze badges

answered Aug 14, 2013 at 8:23

Robin Leboeuf

2,1261 gold badge13 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Souparnika Over a year ago

sorry i can't catch up wht u say

Robin Leboeuf Over a year ago

you should use your .append() function INSIDE of your test() function, because you want the new input to be appent to your body each time your click the button, it means each time your run your function, that's why you should put your line $("body").append(r); in your function instead of putting it after.

Jonathan E. Landrum · Accepted Answer · 2023-05-30 16:12:13Z

7

To add dynamic button on the fly;

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function newButtonClickListener() {
            alert("Hello World");
        }
        function test() {
            var r = $('<input/>').attr({
                type: "button",
                id: "field",
                value: "New Button",
                onclick: "newButtonClickListener()"
            });
            $("body").append(r);
        }
    </script>
</head>
<body>
    <button onclick="test()">Insert after</button><br/> 
</body>
</html>

edited May 30, 2023 at 16:12

Jonathan E. Landrum

3,2414 gold badges38 silver badges50 bronze badges

answered Aug 2, 2018 at 5:39

Shubham Chandra

1071 silver badge4 bronze badges

1 Comment

CertainPerformance Over a year ago

This would be more useful as a runnable snippet, that way anyone can see how it works immediately.

Arun P Johny · Accepted Answer · 2013-08-14 08:37:43Z

4

the $("body").append(r) statement should be within the test function, also there was misplaced " in the test method

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

Demo: Fiddle

Update
In that case try a more jQuery-ish solution

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
          jQuery(function($){
              $('#mybutton').one('click', function(){
                  var r=$('<input/>').attr({
                      type: "button",
                      id: "field",
                      value: 'new'
                  });
                  $("body").append(r);   
              })
          })
        </script>
    </head>
    <body>
        <button id="mybutton">Insert after</button> 
    </body>
</html>

Demo: Plunker

edited Aug 14, 2013 at 8:37

answered Aug 14, 2013 at 8:24

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

6 Comments

Barrie Reader Over a year ago

I want to be the first to thank you for making that code readable... It was really badly formatted

Souparnika Over a year ago

how can we add value to this button??

Souparnika Over a year ago

ok thanks.. how to append this button only "once" on a button click insertafter

Souparnika Over a year ago

and giv me a solution to append button on a div when the page load.

Souparnika Over a year ago

<!DOCTYPE html> <html> <head> <script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> function test() { var r=$('<input/>').attr({ type: "button", id: "field" }); test().append("#test"); } </script> </head> <body> <div id="test"></div> <button id="insertAfterBtn" onclick="test()">Insert after</button> </body> </html>

|

sangram parmar · Accepted Answer · 2013-08-14 09:04:24Z

2

Try this:

<script type="text/javascript">

function test()
{
    if($('input#field').length==0)
    {
       $('<input type="button" id="field"/>').appendTo('body');
     }
}
</script>

edited Aug 14, 2013 at 9:04

answered Aug 14, 2013 at 8:28

sangram parmar

8,7862 gold badges26 silver badges48 bronze badges

3 Comments

Souparnika Over a year ago

button should be appended only once how we can do this

sangram parmar Over a year ago

@user2236221 check updated answer if input with id field is not exist than it append it to body other wise not..

Souparnika Over a year ago

how we can pass id, value etc through function like this_app.CreateButton (id, text, primaryIcon, secondaryIcon, className);

Eswara Reddy · Accepted Answer · 2013-08-14 08:27:39Z

-2

Try this

function test()
{
   $("body").append("<input type='button' id='field' />");
}

answered Aug 14, 2013 at 8:27

Eswara Reddy

1,6471 gold badge18 silver badges28 bronze badges

Comments

Nicolae Olariu · Accepted Answer · 2013-08-14 09:07:50Z

-2

Working plunk here.

To add the new input just once, use the following code:

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

    $("body").append(r);
  });
});

[... source stripped here ...]

<body>
    <button id="insertAfterBtn">Insert after</button>
</body>

[... source stripped here ...]

To make it work in w3 editor, copy/paste the code below into 'source code' section inside w3 editor and then hit 'Submit Code':

<!DOCTYPE html>
<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>

  <body>
    <button id="insertAfterBtn">Insert only one button after</button>
    <div class="myClass"></div>
    <div id="myId"></div>
  </body>

<script type="text/javascript">
$(document).ready(function()
{
  // when dom is ready, call this method to add an input to 'body' tag.
  addInputTo($("body"));

  // when dom is ready, call this method to add an input to a div with class=myClass
  addInputTo($(".myClass"));

  // when dom is ready, call this method to add an input to a div with id=myId
  addInputTo($("#myId"));

  $("#insertAfterBtn").one("click", function(e)
  {
    var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" });

    $("body").append(r);
  });
});

function addInputTo(container)
{
  var inputToAdd = $("<input/>", { type: "button", id: "field", value: "I was added on page load" });

  container.append(inputToAdd);
}
</script>

</html>

edited Aug 14, 2013 at 9:07

answered Aug 14, 2013 at 8:27

Nicolae Olariu

2,5652 gold badges20 silver badges31 bronze badges

9 Comments

Nicolae Olariu Over a year ago

@user2236221 Have you checked that plunk? it's working fine on my side, clickin the button will add a new button each time. What browser are you using? Have you tried the code and it gave any errors?

Souparnika Over a year ago

please giv me a solution to append button on a div when the page loads

Nicolae Olariu Over a year ago

@user2236221 can I ask you why you're using w3 editor? Anyway, check my first answer, you don't need script.js :)

Souparnika Over a year ago

ur first ans is working fine but this code not working can u please give me script.js file.. what is included in that file

Souparnika Over a year ago

please let me know how to put an alert on this button click without changing the code

|

Collectives™ on Stack Overflow

How to add a button dynamically using jquery

6 Answers 6

2 Comments

1 Comment

6 Comments

3 Comments

Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

6 Comments

3 Comments

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related