Dynamically generate an input button with JavaScript/jQuery

This post will discuss how to dynamically generate an <input type=button> in JavaScript and jQuery.

1. Using JavaScript

In plain JavaScript, you can use the document.createElement() method to create an HTML <input> elements of type button and set its required attributes. Then to append the input element to a container, you can use the Node.appendChild() method. This approach is demonstrated below:

JS

document.addEventListener('DOMContentLoaded', function() {

var button = document.createElement('input');

button.type = 'button';

button.id = 'submit';

button.value = 'Submit';

button.className = 'btn';

button.onclick = function() {

// …

};

var container = document.getElementById('container');

container.appendChild(button);

}, false);

HTML

<!doctype html>

<body>

</body>

</html>

Edit in JSFiddle

2. Using jQuery

If you work with jQuery, you can use the .append() method to append a button at the end of the specified container. Here’s a working example:

JS

$(document).ready(function() {

$('#container').append(

$(document.createElement('input')).prop({

type: 'button',

id: 'submit',

value: 'Submit',

className: 'btn'

})

);

});

HTML

<!doctype html>

<body>

</body>

</html>

Edit in JSFiddle

The code can be shortened to:

JS

$(document).ready(function() {

$('#container').append('<input type="button" id="submit" value="Submit" class="btn">');

});

HTML

<!doctype html>

<body>

</body>

</html>

Edit in JSFiddle

Here’s alternate version using .appendTo() method:

JS

$(document).ready(function() {

$('<input type="button" id="submit" value="Submit" class="btn">').appendTo('#container');

});

HTML

<!doctype html>

<body>

</body>

</html>

Edit in JSFiddle

Please note that the latest <button> element is now recommended over the <input> elements of type button to create buttons.

That’s all about dynamically generate an input type=button in JavaScript and jQuery.

Dynamically generate an input button with JavaScript/jQuery

1. Using JavaScript

JS

HTML

2. Using jQuery

JS

HTML

JS

HTML

JS

HTML

Share this: