using document.createDocumentFragment() child dom elements that contain jQuery.data

Question

I want to use document.createDocumentFragment() to create an optimized collection of HTML elements that contain ".data" coming from jQuery (v 1.4.2), but I'm kind of stuck on how to get the data to surface from the HTML elements.

Here's my code:

var genres_html = document.createDocumentFragment();
$(xmlData).find('genres').each(function(i, node) {
    var genre = document.createElement('a');
    $(genre).addClass('button')
        .attr('href', 'javascript:void(0)')
        .html( $(node).find('genreName:first').text() )
        .data('genreData', { id: $(node).find('genreID:first').text() });
    genres_html.appendChild( genre.cloneNode(true) );
});

$('#list').html(genres_html);

// error: $('#list a:first').data('genreData') is null
alert($('#list a:first').data('genreData').id);

What am I doing wrong here? I suspect it's probably something with .cloneNode() not carrying over the data when the element is appended to the documentFragment. Sometimes there are tons of rows so I want to keep things pretty optimized, speed-wise.

Thanks!

Answer 1

You're running cloneNode on a jQuery object. You start off with native API, then convert it to a jQuery object, then switch back.

I suppose you could do:

genres_html.appendChild( genre.get(0).cloneNode(true) );

But then I suspect you would lose your data.

---

EDIT:

If you want jQuery, instead of creating a fragment, try creating an empty jQuery object, then pushing each genre into it:

var genres_html = $();
...
genres_html.push( genre );

---

EDIT:

Give this a try. I'm no DOM expert, but it may work for you.

var genres_html = document.createDocumentFragment();
$(xmlData).find('genres').each(function(i, node) {
    var genre = document.createElement('a');
    genre.setAttribute('class','button');
    genre.setAttribute('href', 'javascript:void(0)');
    var $node = $(node);
    genre.setAttribute('genreData', $node.find('genreID:first').text() );
    genre.innerHTML = $node.find('genreName:first').text();
    genres_html.appendChild( genre.cloneNode(true) );   // Not sure why you would need to make a clone??
});

var list = document.getElementById('list');
list.appendChild(genres_html);

// error: $('#list a:first').data('genreData') is null
alert($('#list a:first').attr('genreData'));

Let me know if it works.

EDIT: Changed my error with innerHTML

EDIT2: Using native innerHTML to append to #list

Answer 2

Sorry I wasn't very clear - I want the performance gain of using documentFragments but the "cleanliness" of jQuery. :) Awesome though, I think I figured it out!

var genres_list = document.createDocumentFragment();
$(xmlData).find("genres").each(function(i, node) {
    genres_list.appendChild(
        $('<a></a>').addClass('button')
            .attr('href', 'javascript:void(0)')
            .html('Anchor Text Here')
            .data('genreData', {id: 2000})
            .get(0) // ah-ha!
        )
    );
});

$('#list').append(genres_list);

// alerts 2000
alert($('#list').find('a:first').data('genreData').id);

Thanks a ton for helping out! I think the problem was the missing .get(0) when appending it to the documentFragment. It loks like .get(0) also returns the data intact!

Performance gains are still TBD. I know jQuery 1.4 uses documentFragments but not exactly sure where/which methods. At least this works now though! :)