3
  1. jQuery('body').append('<div id="my-div" style="background: #fff">my text</div>');
  2. jQuery('<div/>').attr('id', 'my-div').css('background', '#fff').html('my text');
  3. jQuery('<div/>', {id: 'my-div', html: 'my text', css: {background: '#fff'}});

那么最好的方法是什么？可能你有别的东西吗？

4

4 回答 4

6

第三种解决方案是最简洁、最容易阅读和扩展的，并且通常被认为是最干净的，尽管不需要迭代属性的第二种解决方案可能会快一点。

第一个比较慢，因为它要求浏览器解析 HTML（也因为它是唯一将元素添加到 DOM 的，正如 Jan 所注意到的）。

这是性能测试：http: //jsperf.com/add-element

但事实上，你可以为所欲为。即使是速度差异在这里也很少重要。

于 2013-02-12T08:26:50.347 回答
0

我会使用：

jQuery('<div/>').attr({'id': 'my-div',
                       'class': 'my-class'})
                .css({'background': '#fff',
                      'color':'#000'})
                .html('my text');
于 2013-02-12T08:28:07.860 回答
0

我认为nr.3

1.) 如果要更改或访问 div，则必须在追加后调用选择器！

2.) 很多方法调用，但遍及 jquery 定义

3.）最快的方法，一个方法调用

你忘了jQuery('body').append(yourGeneratedDiv);在 2.) 和 3.) 解决方案之后打电话

于 2013-02-12T08:29:02.530 回答
0

这是我的意见。如果错了，请纠正我。例如，如果我得到完整的 HTML 字符串，我会使用第一个，因为它会更快。例如，如果我从不同的来源获取元素配置，例如你可以说像 MVC 中的模型，你实际上是从中构造元素，那么第二第三方法很方便。第二种和第三种方法几乎相同。在第二种方法中，您只是使用链接，但它会使事情变得更脏。这比在第一种方法中仅附加 HTML 慢得多。第三种方法将遍历传递对象的所有属性并构造相同的。但是如果你想使用更简洁的 JavaScript 来做同样的事情，这里是代码 

var div = document.createElement('div');
div.innerHTML = "Your HTML Content";
div.id = "someID";
div.cssText = "Your CSS Code" // or you can use below way
var divStyle = div.style;
divStyle['background-color'] = "#CCC" // Like this
document.getElementById('parentDIV').appendChild(div);

这是jquery方式和native方式之间的速度比较
但是再次，

如果您要即时添加许多小部件，我的建议是根据配置创建 HTML 内容，并且innerHTML每次使用它都比 appendChild 快得多。我已经测试并观察到了这一点。

我的建议是请在实际上不需要的时候避免使用 jQuery，我同意它曾经是强大的 DOM 库，但是在实际上不需要它的地方应用它会降低你的性能。

于 2013-02-12T08:45:18.487 回答