I have a documentFragment with several child nodes containing some .data() added like so:

myDocumentFragment = document.createDocumentFragment();
for(...) {
  myDocumentFragment.appendChild(
    $('').addClass('button')
      .attr('href', 'javascript:void(0)')
      .html('click me')
      .data('rowData', { 'id': 103, 'test': 'testy' })
      .get(0)
  );
}

When I try to append the documentFragment to a div on the page:

$('#div').append( myDocumentFragment );

I can access the data just fine:

alert( $('#div a:first').data('rowData').id ); // alerts '103'

But if I clone the node with cloneNode(true), I can't access the node's data. :(

$('#div').append( myDocumentFragment.cloneNode(true) );
...
alert( $('#div a:first').data('rowData').id ); // alerts undefined

Has anyone else done this or know of a workaround? I guess I could store the row's data in jQuery.data('#some_random_parent_div', 'rows', [array of ids]), but that kinda defeats the purpose of making the data immediately/easily available to each row.

I've also read that jQuery uses documentFragments, but I'm not sure exactly how, or in what methods. Does anyone have any more details there?

Thanks!