将 jQuery 数据附加为字符串时在 div 上设置答案

【问题标题】：Setting jQuery data on a div when appending it as a string将 jQuery 数据附加为字符串时在 div 上设置
【发布时间】：2013-02-07 19:36:36
【问题描述】：

我正在创建一个生成大量divs 的jQuery 插件。最初我使用append 函数创建所有元素，如下所示。

var myObject= $('<div></div>').addClass('myobjectname');
parentObject.append(myObject);

我有很多这样创建的元素，并且每个元素都有不同的data 使用myObject.data('mykey',ajavascriptobject); 与它们相关联但后来，当我开始阅读有关 jQuery 优化的更多内容时，我了解到像 append 这样的 DOM 操作函数在性能方面非常昂贵。

现在，我正在尝试将整个 div 结构创建为字符串，然后将其作为一个整体附加到父 DOM 对象，这应该会大大提高性能。

var i=0;
var myBigString = [];
myBigString[i++] = "<div class=\"myobjectname\">";
myBigString[i++] = "my content";
myBigString[i++] = "</div>";
parentObject.append(myBigString.join(''));

我正在使用data() 函数来存储有关每个对象的详细信息，以便以后访问它（单击/鼠标悬停等时）。但是现在，由于我正在创建整个 div 结构的字符串，

如果我将 data 创建为字符串并稍后将其附加到 DOM，如何将它们关联到元素？

【问题讨论】：

标签： javascript jquery html css performance

【解决方案1】：

你这样做：

<div data-datum-name="your data string"></div>

对于对象：

<div data-datum-name=' + JSON.stringify(yourObject) + '></div>

JSFiddle example.

【讨论】：

> 非常感谢！.. 那么当在元素上调用 data 函数时，我是否能够按原样检索对象？另外，为了确认，我的对象有子对象。这在那种情况下会起作用吗？最后，由于我将付出相当大的努力来修改我的代码，你认为这真的会提高性能吗？
是的，要获取所有数据：$('selector').data()。它应该更快 - 每次 DOM 修改都需要重新计算文档重流，这可能是一个瓶颈：stackoverflow.com/a/9467577/187954 您也可能只是 myBigString.push(anotherString) 而不是您的 i 变量。