Question

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

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

Answer 1

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

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

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

但你可以按照自己喜欢的方式行事。即使速度差异在这里也很少见。

Answer 2

我会用：

jQuery('<div/>').attr({'id': 'my-div',
                       'class': 'my-class'})
                .css({'background': '#fff',
                      'color':'#000'})
                .html('my text');

Answer 3

我认为nr.3

1。）如果你想改变或访问div，你必须在追加后调用一个选择器！

2。）大部分方法调用，但遍及jquery定义

3。）最快的方法，有一个meethod调用

您忘记在2.）和3.）解决方案之后致电jQuery('body').append(yourGeneratedDiv);

Answer 4

这是我的意见。如果有人有错，请指正。例如，如果我得到完整的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);

Here是jquery方式和本地方式之间的速度比较但是，再次，

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

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

如何更好地创建新元素？

4 个答案: