Dynamically add button, textbox, input, radio elements in html form using JavaScript.

Adding Elements like textbox, button, radio button etc in a html form using JavaScript is very simple. JavaScript’s document object has a method called createElement() which can be used to create html elements dynamically.

We had used this function in our tutorial: Dynamic combobox-listbox-drop-down using javascript to add dynamic options to a combo box-listbox. Let us use this function to create textboxes, radio buttons, buttons etc dynamically and add them in our page.

add element form html dynamically javascript

Following is the source code of our example.

Dynamically add Textbox, Radio, Button in html Form using JavaScript

Dynamically add element in form.

Select the element and hit Add to add it in form.

Also note that we have used setAttribute() method to assign the attributes to our dynamically created element.


Any other way of adding elements dynamically in html page?
Let me know.

If you read this far, you should follow me on twitter here.


  • Anushree 11 June, 2013, 17:17

    How to add multiple radio button dynamically using java script. with a title in front of each

  • bidyut saha 11 June, 2013, 20:47

    kep sharing ji

  • Bhargav Goswami 14 June, 2013, 15:43

    Very useful

  • Tim 14 June, 2013, 23:48

    Spent an hour googling for an example for dynamically generated forms. Thanks for the read and info.

  • Randz 25 June, 2013, 12:08

    how to save them if you have created and used a couple of textboxes?

  • mike 30 August, 2013, 23:52

    Thanks for your help. This was the clearest example I found.

  • Alex 16 October, 2013, 5:26

    hello, i am trying to create a dynamic website to works in a google chrome com document.write but i know that code doesn’t work in chrome . so i would like to use a document.createElement. but i don’t know how. The original code is :

    function Image(arquivo,arquivo2){
                this.src = arquivo; 
                this.texto = arquivo2;
       foto_3 = new Image('https://lh4.googleusercontent.com/-Kic-U1poM-A/T9LFzOtBeHI/AAAAAAAABhU/gvydOaCykBY/s435/Ford%2520Thunderbird.png','TESTE 1');             
       foto_2 = new Image('https://lh5.googleusercontent.com/-_nSmqWg3GUc/T9LFpD2mDoI/AAAAAAAABhM/Cb-85BGq1Ng/s435/Double%2520Deck.png','TESTE 2');             
       foto_1 = new Image('https://lh6.googleusercontent.com/-99J0CGeHXNo/T9LFeTKWDxI/AAAAAAAABg8/rmO5NEP2eEM/s435/Ford%2520Cortina.png','TESTE 3'); 
               function swp_foto(direcc){  if ( direcc == "+" ) { foto_actual = foto_actual + 1;
                       if (foto_actual>cant_fotos) {foto_actual=1;}}
                       else { foto_actual = foto_actual - 1;
                       if (foto_actual<1) {foto_actual=cant_fotos;}}
                document['foto_prod'].src = eval( "foto_"+foto_actual+".src" );
                document.createElement.T1= eval( "foto_"+foto_actual+".texto" );

    If you can send me the solution by e-mail i will be grateful . Regards.

  • Mohamed Ameenullah 14 February, 2014, 15:28

    very useful. thanks a lot…. keep sharing your knowledge

  • dax 13 March, 2014, 11:18

    how to get values of all dynamically created textboxes in php and display it in php??

  • jkdoan 25 April, 2014, 23:21


    Does anyone know to how to hide/display a button based on another field dynamically?


  • mohammed 10 June, 2014, 15:37

    Hii . . .i have a requirement. i want to display and also text box and select box at a time by only clicking one hyper link.
    Plz help me out

  • mohammed 10 June, 2014, 15:38

    Hii . . .i have a requirement. i want to display and also delete text box and select box at a time by only clicking one hyper link for adding and another for deleting.
    Plz help me out

  • trendrumah 14 November, 2014, 12:18

    nice Post,
    Keep sharing pal!

  • Devendra 4 December, 2014, 15:14

    its useful but after refress all element disappear……
    please help…

  • jeba 15 December, 2014, 18:13

    how to create dynamic db

  • ravi 6 January, 2015, 15:59

    how to add them vertically??

  • MaheshK 22 January, 2015, 12:03

    i have a table which i am creating dynamically using javascript without using table tag, my problem is when i click on any text in a table, that text should be get appended in another new textbox using javascript, i want code for that i don’t know the logic, pls help me

  • prakashsingh 16 March, 2015, 16:43

    good post dear

Leave a Reply

Your email address will not be published. Required fields are marked *


To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]