Is there is any Jquery plugin for create complex DOM struture

Question

Is there is any Jquery plugin for create complex DOM struture ?

i want to create HTML table through ajax response.

table cell contains checkboxes , radio button links html components.

also want to handle events like click , onchanges on respected components.

Answer 1

DOM structure regardless of complexity can be created programmatically or via parsing of valid string with jQuery core. I am curious how complex do you need. I would think complexity comes with the attaching of various events and behaviours, not the DOM itself.

Update:
Oops, took me few min just to post the above via my phone browser while the qn was updated. Anywy if your DOM is table-centric, you might want to consider any of jQuery's extensive table pr grid plugins. Do a search and you will find a few popular and rather 'complex' ones.

Answer 2

No, there is probably not.

Also you don't need a plugin to create elements, if you've got a fairly complex structure you can simply

$('<table><tbody><tr><td><label><input type="checkbox"> Check me</label></td><td class="clickable">Click me</td></tr></tbody></table>')
.find(".clickable")
  .click(function(){
    alert("Column got clicked");
  })
  .end()
.appendTo($("body"));

Happy chaining!

Answer 3

You should look into jQuery 1.4, the new API has made it so easy to create new DOM and the code is still human readable

Here is an simple example of creating a new dynamic row and add it to the table. Inside the row, there are several form elements with the events attached to them.

jQuery("<tr />")
  .append(
    jQuery("<td />", {
      text: name
    })
  )
 .append(
    jQuery("<td />", {
      html: jQuery("<input />", {
              "type": "text",
              "name": "rule[properties][" + name + "]",
              val: value
            })
    })
  )
  .append(
    jQuery("<td />", {
      html: jQuery("<input />", {
              "type": "checkbox",
              "name": "rule[important][" + name + "]",
              "checked": isImportant
            })
    })
  )
  .append(
    jQuery("<td />", {
      "style": "text-align: right;",
      html: jQuery("<img />", {
              "src": "/buttons/pane_button_remove.png",
              click: function() { jQuery(this).closest("tr").remove(); }
            })
    })
  )
  .appendTo("table");

more info here