Creating HTML elements on fly in jQuery

Hello friends, 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 jQuery.

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

Add jQuery.js reference in index.html file.

Place index.html, jQuery.js and script.js file in same directory (folder).

<html> <head> <title></title> </head> <div id="container" class="container"></div> <script src="jquery.js" /> <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. jquery will creates controls inside container div autometically.

1) jquery code to Create div on fly.

'use strict' var $d = $('<div>'); $d.attr("id","dv"); $('.container').append($d);

2) jquery code to Create span on fly.

'use strict' var $s = $('<span>'); $s.attr("id","spn"); $s.append("Span"); $('.container').append($s);

3) jquery code to Create label on fly.

'use strict' var $l = $('<label>'); $l.attr("id","lbl"); $l.append("Label"); $('.container').append($l);

4) jquery code to Create textbox on fly.

'use strict' var $i = $('<input>'); $i.attr("id","txt"); $i.attr("type","text"); $i.attr("value","TextBox"); $('.container').append($i);

5) jquery code to Create two radiobuttons on fly.

'use strict' var $r = $('<input>'); $r.attr("name","rbtn"); $r.attr("type","radio"); $r.attr("value","red"); $r.attr("checked",true); var $r2 = $('<input>'); $r2.attr("name","rbtn"); $r2.attr("type","radio"); $r2.attr("value","green"); $('.container').append($r); $('.container').append($r2);

6) jquery code to Create checkbox on fly.

'use strict' var $c = $('<input>'); $c.attr("id","chk"); $c.attr("type","checkbox"); $c.attr("value","hue"); $c.attr("checked",true); $('.container').append($c);

7) jquery code to Create hidden field on fly.

'use strict' var $h = $('<hidden>'); $h.attr("id","hf"); $h.attr("value","0"); $('.container').append($h);

8) jquery code to Create dropdownlist on fly.

'use strict' var $so = $('<select>'); $so.attr("id","ddl"); var z=["India","Australia","China","Russia","America"]; $.each(z,function(i,e){ $so.append($('<option></option>').val(i).html(e)); }); $('.container').append($so);

9) jquery code to Create simple button on fly.

'use strict' var $b = $('<input>'); $b.attr("id","btn"); $b.attr("type","button"); $b.attr("value","Button"); $('.container').append($b);

10) jquery code to Create submit button on fly.

'use strict' var $bs = $('<input>'); $bs.attr("id","btns"); $bs.attr("type","submit"); $bs.attr("value","Submit"); $('.container').append($bs);

11) jquery code to Create reset button on fly.

'use strict' var $br = $('<input>'); $br.attr("id","btnr"); $br.attr("type","reset"); $br.attr("value","Reset"); $('.container').append($br);

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

'use strict' var $ba = $('<input>'); $ba.attr("id","btna"); $ba.attr("type","button"); $ba.attr("value","Alert"); $ba.on('click',function(){ alert('Hello world!'); }) $('.container').append($ba);

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

<html> <head> <title></title> </head> <div id="container" class="container"></div> <script src="jQuery.js" /> <script src="script.js" /> </html> <script> 'use strict' //div var $d = $('<div>'); $d.attr("id","dv"); $d.append("div"); //span var $s = $('<span>'); $s.attr("id","spn"); $s.append("Span"); //label var $l = $('<label>'); $l.attr("id","lbl"); $l.append("Label"); //Textbox var $i = $('<input>'); $i.attr("id","txt"); $i.attr("type","text"); $i.attr("value","TextBox"); //Radio Button var $r = $('<input>'); $r.attr("name","rbtn"); $r.attr("type","radio"); $r.attr("value","red"); $r.attr("checked",true); var $r2 = $('<input>'); $r2.attr("name","rbtn"); $r2.attr("type","radio"); $r2.attr("value","green"); //CheckBox var $c = $('<input>'); $c.attr("id","chk"); $c.attr("type","checkbox"); $c.attr("value","hue"); $c.attr("checked",true); //Hidden var $h = $('<hidden>'); $h.attr("id","hf"); $h.attr("value","0"); //Select var $so = $('<select>'); $so.attr("id","ddl"); var z=["India","Australia","China","Russia","America"]; $.each(z,function(i,e){ $so.append($('<option></option>').val(i).html(e)); }); //Input - Button var $b = $('<input>'); $b.attr("id","btn"); $b.attr("type","button"); $b.attr("value","Button"); //Input - Submit var $bs = $('<input>'); $bs.attr("id","btns"); $bs.attr("type","submit"); $bs.attr("value","Submit"); //Input - Reset var $br = $('<input>'); $br.attr("id","btnr"); $br.attr("type","reset"); $br.attr("value","Reset"); //Input - Button Event var $ba = $('<input>'); $ba.attr("id","btna"); $ba.attr("type","button"); $ba.attr("value","Alert"); $ba.on('click',function(){ alert('Hello world!'); }) $('.container').append($d); $('.container').append($s); $('.container').append($l); $('.container').append($i); $('.container').append($r); $('.container').append($r2); $('.container').append($c); $('.container').append($h); $('.container').append($so); $('.container').append($b); $('.container').append($bs); $('.container').append($br); $('.container').append($ba); </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.



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