Javascript 使用包含jQuery.data的document.createDocumentFragment（）子dom元素

我想使用

document.createDocumentFragment（）

创建一个包含来自jQuery（v1.4.2）的“.data”的HTML元素的优化集合，但我有点被困在如何从HTML元素获取数据的表面上

这是我的密码：

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);

我做错了什么？我怀疑这可能是由于

.cloneNode（）

在将元素附加到

文档片段时没有携带数据。有时会有很多行，所以我想保持优化，速度方面

谢谢
 您正在jQuery对象上运行
cloneNode
。从本机API开始，然后将其转换为jQuery对象，然后切换回

我想你可以做到：

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

但是我怀疑你会丢失你的
数据


编辑：

如果需要jQuery，请尝试创建一个空jQuery对象，而不是创建一个片段，然后将每个类型推入其中：

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


编辑：

试试这个。我不是DOM专家，但它可能适合你

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'));

让我知道它是否有效

编辑：更改了innerHTML的错误

EDIT2：使用本机innerHTML附加到
#列表中
很抱歉，我不是很清楚-我希望使用documentFragments可以提高性能，但jQuery的“干净性”：太棒了，我想我知道了


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);



var genres_list=document.createDocumentFragment（）；
$（xmlData）.find（“类型”）.each（函数（i，节点）{
类型列表(
$（''）.addClass（'按钮'）
.attr（'href'，'javascript:void（0）'
.html（'锚文本在此'）
.data（'genreData'，{id:2000}）
.get（0）//啊哈！
)
);
});
$（“#列表”）.append（流派列表）；
//警报2000
警报（$（'#list'）.find（'a:first'）.data（'genreData'）.id）；

非常感谢你的帮助！我认为问题在于将其附加到documentFragment时缺少.get（0）。它像。get（0）一样返回完整的数据

性能增益仍然待定。我知道jQuery1.4使用documentFragments，但不确定在何处/哪些方法。不过，至少现在可以了！：）
 是的，我想这是我困惑的主要部分，我不知道我是否想从jQuery对象开始。我在看这张幻灯片，但它是纯JS的：-我需要的基本上是将其转换为包含元素数据的jQuery对象。您可以使用本机
setAttribute
和
innerHTML
函数，但是如果您需要使用jQuery的
data（）
，那么显然您需要一个jQuery对象。所以问题是，你真的需要使用“数据”吗？也许你可以设置一个自定义属性。我可能会更新我的答案。谢谢，是的，问题是我不能将“jqueryized”documentElement（包含数据）附加到我的documentFragment。是的，我想使用“数据”：（是的，这就是为什么您需要将jQuery化的元素推送到（原来）空的jQuery对象，或者不使用jQuery的
数据
。因为您只是在存储文本，所以您应该能够在属性中这样做。请看我的更新答案。我很确定这会起作用，但我想我正在寻找一个更“jQueryish”解决方案。：/如果您希望提高性能，那么首先需要绕过jQuery对象的创建，并使用jQuery的API。所有这些都只是本机API的抽象，只会降低代码的速度。如果性能可以接受，那么不妨使用jQuery。如果需要改进，那就去吧原生。使用
documentFragment
可能比填充一个空的jQuery对象没有多大帮助，因为jQuery可能只是创建了自己的片段。如果您想要一些非常好的jQuery，请执行
$（“”，{'class'：'button'，'href'：'javascript:void（0），'text'：'anchortexthere'）。data（'genreData，{id:2000}）。get（0）
Good point！在这一点上抛弃jQuery是不可能的。：D我将数字0-1000与字母“h”结合起来，并将它们附加到div中……1）使用我上面的方法（jQuery with document.createDocumentFragment），2）在for循环的每次迭代中使用jQuery.append，3）在不使用jQuery的情况下使用document.createDocumentFragment。下面是一个结果示例：1）922ms，2）1547ms，3）828ms。因此，为了节省约600毫秒，我将使用第一个选项：D也感谢您提供了漂亮的新documentElement创建语法！1.4是好东西。