Use dynamically created html content later with jQuery

Question

I have a method where I dynamically create a table and assign it to a local variable:

 var content = $('<table id="gvCapitalByYear" cellspacing="0"
       cellpadding="2"/>').append('<tbody/>');

Then I have a loop that is meant to add rows to the above created table. But I can't anyhow get this done. I tried the following:

content=$('#gvCapitalByYear').find('tbody').append('<tr/>');

but it doesn't work, as, in my opinion, an element with id "gvCapitalByYear" has not been appended to anywhere, it was just created on the fly and kept in a variable. Is it possible to somehow use the content variable get the dynamically created table, add certain amount of rows to and the reassign it back to the content variable again?

Answer 1

You'll need to use the content variable instead of querying the DOM for these elements (e.g., $('#gvCapitalByYear')) because the content hasn't been attached to the DOM yet.

Once you wrap the table HTML as a jQuery object, you can query and manipulate it just like any other jQuery object. The object is "live" so you won't need to reassign the content variable once you append more content.

var content = $('<table id="gvCapitalByYear" cellspacing="0" cellpadding="2"><tbody></tbody></table>');
//later, add as many rows as you like
content.find('tbody').append('<tr><td>Some Content Here</td></tr>');

Also, table, tbody and tr elements aren't self-closing tags, you will need to have an opening tag and closing tag for each for this to be valid HTML.

Working Demo

Answer 2

Try this

$('body').append('<table id="gvCapitalByYear" cellspacing="0"
   cellpadding="2"></table>');

then

$('#gvCapitalByYear').append('<tr><td>my data</td><td>more data</td></tr>');