Use dynamically created html content later with jQuery -

i have method dynamically create table , assign local variable:

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

then have loop meant add rows above created table. can't anyhow done. tried following:

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

but doesn't work, as, in opinion, element id "gvcapitalbyyear" has not been appended anywhere, created on fly , kept in variable. possible somehow use content variable dynamically created table, add amount of rows , reassign content variable again?

you'll need use content variable instead of querying dom these elements (e.g., $('#gvcapitalbyyear')) because content hasn't been attached dom yet.

once wrap table html jquery object, can query , manipulate other jquery object. object "live" won't need reassign content variable once append more content.

var content = $('<table id="gvcapitalbyyear" cellspacing="0" cellpadding="2"><tbody></tbody></table>'); //later, add many rows content.find('tbody').append('<tr><td>some content here</td></tr>'); 

also, table, tbody , tr elements aren't self-closing tags, need have opening tag , closing tag each valid html.

working demo