Creating HTML controls on fly in javascript

Hello everyone, In this article we will learn, How to create HTML Controls (Document object model [DOM]) on fly (without writing html code to create DOM controls) using core javascript.

Create html file naming index.html and copy following code into index.html file.

Place index.html and script.js both files in same directory (folder).

<html> <head> <title></title> </head> <div id="container" class="container"></div> <script src="script.js" /> </html>

create script.js file and copy and replace following codes one by one and open index.html file in web browser. javascript will creates controls inside container div automatically.

1) javascript code to Create div on fly.

'use strict' var d = document.createElement('div'); d.id = "dv"; d.name = "dv"; d.innerText = "div"; d.style.color = "#fff"; d.appendChild(d); document.getElementById("container").appendChild(d);

2) javascript code to Create span on fly.

'use strict' var sp = document.createElement('span'); sp.id = "spn"; sp.name = "spn"; sp.innerText = "Span"; sp.style.color = "#fff"; document.getElementById("container").appendChild(sp);

3) javascript code to Create label on fly.

'use strict' var l = document.createElement('label'); l.id = "lbl"; l.name = "lbl"; l.innerText = "Label"; l.style.color = "#fff"; document.getElementById("container").appendChild(sp);

4) javascript code to Create textbox on fly.

'use strict' var i = document.createElement('Input'); i.id = "txt"; i.name = "txt"; i.value = "Input"; i.style.color = "#000"; i.type = "text"; document.getElementById("container").appendChild(i);

5) javascript code to Create two radiobuttons on fly.

'use strict' var r = document.createElement('Input'); r.name = "rbtncolor"; r.value = "red"; r.style.color = "#fff"; r.type = "radio"; var r2 = document.createElement('Input'); r2.name = "rbtncolor"; r2.value = "green"; r2.style.color = "#fff"; r2.type = "radio"; r2.checked = true; document.getElementById("container").appendChild(r); document.getElementById("container").appendChild(r2);

6) javascript code to Create checkbox on fly.

'use strict' var c = document.createElement('Input'); c.name = "chk"; c.value = "hue"; c.style.color = "#fff"; c.type = "checkbox"; c.checked = true; document.getElementById("container").appendChild(c);

7) javascript code to Create hidden field on fly.

'use strict' var h = document.createElement('hidden'); h.name = "hf"; h.id = "hf"; h.value = "0"; document.getElementById("container").appendChild(h);

8) javascript code to Create dropdownlist on fly.

'use strict' var s = document.createElement('select'); s.id = "ddl"; s.name = "ddl"; var o; var z=["India","Australia","China","Russia","America"]; for(var n=0;n<5;n++){ o = document.createElement('option'); o.value = n; o.innerText = z[n]; s.options.add(o); } document.getElementById("container").appendChild(s);

9) javascript code to Create simple button on fly.

'use strict' var b = document.createElement('Input'); b.id = "btn"; b.name = "btn"; b.value = "Button"; b.style.color = "#000"; b.type = "button"; document.getElementById("container").appendChild(b);

10) javascript code to Create submit button on fly.

'use strict' var bs = document.createElement('Input'); bs.id = "btns"; bs.name = "btns"; bs.value = "Submit"; bs.style.color = "#000"; bs.type = "submit"; document.getElementById("container").appendChild(bs);

11) javascript code to Create reset button on fly.

'use strict' var br = document.createElement('Input'); br.id = "btnr"; br.name = "btnr"; br.value = "Reset"; br.style.color = "#000"; br.type = "reset"; document.getElementById("container").appendChild(br);

12) javascript code to Create button with click event on fly.

'use strict' var ba = document.createElement('Input'); ba.id = "btna"; ba.name = "btna"; ba.value = "Alert"; ba.style.color = "#000"; ba.type = "button"; ba.addEventListener("click",function(){ alert('Hello World !'); ba.removeEventListener("click", null); }); document.getElementById("container").appendChild(ba);

You can copy following code to create all above html controls automatically.

<html> <head> <title></title> </head> <div id="container" class="container"></div> <script src="script.js" /> </html> <script> 'use strict' //Div var d = document.createElement('div'); d.id = "dv"; d.name = "dv"; d.innerText = "div"; d.style.color = "#fff"; //span var sp = document.createElement('span'); sp.id = "spn"; sp.name = "spn"; sp.innerText = "Span"; sp.style.color = "#fff"; //Label var l = document.createElement('label'); l.id = "lbl"; l.name = "lbl"; l.innerText = "Label"; l.style.color = "#fff"; //Input-textbox var i = document.createElement('Input'); i.id = "txt"; i.name = "txt"; i.value = "Input"; i.style.color = "#000"; i.type = "text"; //Input-radio var r = document.createElement('Input'); r.name = "rbtncolor"; r.value = "red"; r.style.color = "#fff"; r.type = "radio"; var r2 = document.createElement('Input'); r2.name = "rbtncolor"; r2.value = "green"; r2.style.color = "#fff"; r2.type = "radio"; r2.checked = true; //CheckBox var c = document.createElement('Input'); c.name = "chk"; c.value = "hue"; c.style.color = "#fff"; c.type = "checkbox"; c.checked = true; //Hidden var h = document.createElement('hidden'); h.name = "hf"; h.id = "hf"; h.value = "0"; var s = document.createElement('select'); s.id = "ddl"; s.name = "ddl"; var o; var z=["India","Australia","China","Russia","America"]; for(var n=0;n<5;n++){ o = document.createElement('option'); o.value = n; o.innerText = z[n]; s.options.add(o); } //Input - Button var b = document.createElement('Input'); b.id = "btn"; b.name = "btn"; b.value = "Button"; b.style.color = "#000"; b.type = "button"; //Input - Button var bs = document.createElement('Input'); bs.id = "btns"; bs.name = "btns"; bs.value = "Submit"; bs.style.color = "#000"; bs.type = "submit"; //Input - Button var br = document.createElement('Input'); br.id = "btnr"; br.name = "btnr"; br.value = "Reset"; br.style.color = "#000"; br.type = "reset"; //Input - Button var ba = document.createElement('Input'); ba.id = "btna"; ba.name = "btna"; ba.value = "Alert"; ba.style.color = "#000"; ba.type = "button"; ba.addEventListener("click",function(){ alert('Hello World !'); ba.removeEventListener("click", null); }); d.appendChild(sp); d.appendChild(l); d.appendChild(i); d.appendChild(r); d.appendChild(r2); d.appendChild(c); d.appendChild(h); d.appendChild(s); d.appendChild(b); d.appendChild(bs); d.appendChild(br); d.appendChild(ba); document.getElementById("container").appendChild(d); </script>

If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.


Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.

 
 

{{c.Content}}

Comment By: {{c.Author}}  On:   {{c.CreatedDate|date:'dd/MM/yyyy'}} / Reply


Categories