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, Jul 11 '17 at 07:25
Possible duplicate of [Creating Dynamic button with click event in javascript](https://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript) — Hassan Imam, Jul 11 '17 at 07:26

score 2 · Answer 1 · edited Jul 20 '17 at 13:24

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 '17 at 13:24

Milan Chheda

8,159
3
20
35

answered Jul 11 '17 at 07:28

prasanth

22,145
4
29
53

how can button come in center because here margin left right is not working – janak gera Jul 11 '17 at 07:31
1

@janakgera You are using `margin-right` instead of `margin-left` – Weedoze Jul 11 '17 at 07:33
@janakgera margin not more effect with button center position try with some transfrom property exact center in horizontal.see my updated answer – prasanth Jul 11 '17 at 07:39

score 2 · Answer 2 · answered Jul 11 '17 at 07:30

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(){...})

score 0 · Answer 3 · answered Jul 11 '17 at 07:28

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);

score 0 · Answer 4 · answered Jul 11 '17 at 07:33

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

how to make a button dynamically in Javascript

4 Answers4

Possible problem A

Possible problem B