Creating DOM Elements on the fly with jQuery
Jquery is one of my most favorite javascript client library. It is extremely faster than any other library and very much easy to use. I can reduce very much complex code of my regular javascript now with the help of jQuery as i am converting all of my project’s front end from regular javascripting native way to jQuery way. Last week i was messing up with a project. That have a page in which I have to create a list of DIVS on the fly.
Although it is easy to append DOM elements by innerHTML but that does not gives any on the fly event handling. Here is a simple way I use to create a list of Divs and assign events to them with jQuery.
Here is a simple structure I’ll be using to create with jQuery (assuming that i have a parent DIV with id “members”.
<div class="member-row" id="row_id"> <div class="member-name"></div> <div class="member-email"></div> <div class="member-action"><a href="#">Delete</a></div> </div>
Now lets do it in jQuery way. First lets create a function that can be used to do it again and again.
function addMemberRow(rowid, name_data, email_data){
var parentDiv = jQuery(document.createElement("div"));
parentDiv.attr("class","member-row");
parentDiv.attr("id", rowid);
// create a sub section
var nameDiv = jQuery(document.createElement("div"));
nameDiv.attr("class","member-name");
// now add some data to it
nameDiv.html(name_data);
// create sub section for email
var emailDiv = jQuery(document.createElement("div"));
emailDiv.attr("class", "member-email");
// add some data
emailDiv.html(email_data);
// now create the action buttons div
var actionDiv = jQuery(document.createElement("div"));
actionDiv.attr("class","member-action");
// create action anchor button
var actionDelete = jQuery(document.createElement("a"));
actionDelete.attr("href","#");
actionDelete.bind("click", function(){ your_del_function_name(rowid); });
// add action link to actionDiv
actionDiv.append(actionDelete);
// add all other divs to parent Div
parentDiv.append(nameDiv);
parentDiv.append(emailDiv);
//finally add this member's row div to members panel
jQuery("#members").append(parentDiv);
}
function your_del_function_name(rowid){
var conf = confirm("Are you Sure you want to remove this item ?");
if(conf)
jQuery("#" + rowid).fadeOut(1000,function(){
jQuery("#" + rowid).remove();
});
else
return;
}
// Now call the function as many times as you want
addMemberRow("row1");
addMemberRow("row2");
addMemberRow("row3");
Firs of all we created a parent div that will hold 3 child elements. One for members name column, 2nd for members email and last one for an action link that will remove this parent div on click.
2ndly we created all three child elements and the action link. Then append the action link to its div. And finally append all these columns to parent div and then to member’s main div. You can create as many columns as you want. And this is not only for DIVS , you can create any type of element.
There are many jQuery plugins available for creating DOM on the fly. But sometimes you have to code your own. You can browse the jQuery DOM plugins list to find out suitable plugin or just use the above way 
Related posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Instead of this:
var nameDiv = jQuery(document.createElement(”div”));
You can do:
var nameDiv = jQuery(”);
Less to type and more readable, imo.
yes i think the second one is much better, but I’ll still preffer to use native document.createElement , because it seems to be a little faster for me than jQuery(
) when I test it on 1000 calls.anyways thanks for your cool update tip
except closing queries...
[...] If you are a programmer, this book will help you to learn ajax, basic form submission, and other advance level of DOM scripting including even handling and creating DOM elements with jQuery. [...]