how to make a button dynamically in Javascript

Question

I am trying to make a dynamically button in javascript

    var button = document.createElement('input');
    button.setAttribute('type', 'submit');
    button.setAttribute('ID', 'btnSendMailClone');
    button.setAttribute('value', 'Submit');
    button.setAttribute('onclick', 'btnSendMail_Click()');
    button.setAttribute('form', 'myform');
    document.body.appendChild(button);
    button.setAttribute("class", "btn btn-primary");
    $('#button').addClass('myClass');
   $('#btnSendMailClone').css("margin-right", "100px")
    $('#btnSendMailClone').css("width", "98");

And by clicking on the event it should come on its click event

function btnSendMail_Click() {
           debugger;

        }

Button i debug its giving me error on this line

document.body.appendChild(button);

it says unable to get property append child.I am newbie to java script.Pleas guide what i am doing wrong

if you are using jquery, why can't you try $('#btnSendMailClone').click(function(){}); instead of writing a seperate function? — Hema Nandagopal
– Hema Nandagopal, Commented Jul 11, 2017 at 7:25
Possible duplicate of Creating Dynamic button with click event in javascript — Hassan Imam
– Hassan Imam, Commented Jul 11, 2017 at 7:26

Weedoze · Accepted Answer · 2017-07-11 07:30:18Z

Your code is working fine

var button = document.createElement('input');
button.setAttribute('type', 'submit');
button.setAttribute('ID', 'btnSendMailClone');
button.setAttribute('value', 'Submit');
button.setAttribute('onclick', 'btnSendMail_Click()');
button.setAttribute('form', 'myform');
document.body.appendChild(button);
button.setAttribute("class", "btn btn-primary");
$('#button').addClass('myClass');
$('#btnSendMailClone').css("margin-right", "100px")
$('#btnSendMailClone').css("width", "98");

function btnSendMail_Click() {
  console.log("Submit !");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Possible problem A

Your are using IE then you will have to replace

document.body.appendChild(button);

with

document.getElementsByTagName('body')[0].appendChild(button);

Possible problem B

Your script is inside the <head>. This will execute the script before the <body> has been seen by the browser. To solve this, move your script at the end of the document

Or your can use $(document).ready(function(){...})

Milan Chheda · Accepted Answer · 2017-07-20 13:24:56Z

2

I think you document not ready to append .Try with append button after document.ready .And don't forget to add jquery link

Updated

center position button

$(document).ready(function() {
  var button = document.createElement('input');
  button.setAttribute('type', 'submit');
  button.setAttribute('ID', 'btnSendMailClone');
  button.setAttribute('value', 'Submit');
  button.setAttribute('onclick', 'btnSendMail_Click()');
  button.setAttribute('form', 'myform');
  document.body.appendChild(button);
  button.setAttribute("class", "btn btn-primary");
  $('#button').addClass('myClass');
  $('#btnSendMailClone').addClass('center')

})

function btnSendMail_Click() {
  console.log($('input')[0].outerHTML)
}

.center {
  margin: auto;
  width: 98px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Jul 20, 2017 at 13:24

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

answered Jul 11, 2017 at 7:28

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

3 Comments

janak gera Over a year ago

how can button come in center because here margin left right is not working

Weedoze Over a year ago

@janakgera You are using margin-right instead of margin-left

prasanth Over a year ago

@janakgera margin not more effect with button center position try with some transfrom property exact center in horizontal.see my updated answer

R. Keller · Accepted Answer · 2017-07-11 07:28:32Z

0

You have got many options. One simple Solution would be to test if body exists using:

if(document.body != null){ document.body.appendChild(button); }

Another Option would be to use it by selecting the tag name:

document.getElementsByTagName('body')[0].appendChild(button);

For dynamic manipulation you should have a deep look on jQuery:

$('body').append(button);
or
$('body').html(button);

answered Jul 11, 2017 at 7:28

R. Keller

1007 bronze badges

Comments

Fered · Accepted Answer · 2017-07-11 07:33:40Z

0

based on last line of your code it seems you are using jQuery, therefore I suggest you to create the button with it like :

var button = $('<button type="submit" id="btnSendMailClone" class="btn btn-primary" style="margin-right:100px:width:98%">Submit</button>');
button.on('click',btnSendMail_Click):
$('body').append(button);

hope it helps

answered Jul 11, 2017 at 7:33

Fered

9089 silver badges11 bronze badges

Collectives™ on Stack Overflow

how to make a button dynamically in Javascript

4 Answers 4

Possible problem A

Possible problem B

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Possible problem A

Possible problem B

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related