jQuery元素构造函数-建议使用哪种方法?

我以前以为没有区别,但我是在看hks发布的代码 this other question

看看这里的结果: http://fisher.spadgos.com/stuff/jqueryConstructors.html

$('<a class="foo">').length; // in firefox, this == 1. IE, this == 0

$('<br></br>').length; // Firefox == 1; IE == 2

非常 不一致,但是在Firefox和Chrome中,所有表单都工作得很好。

$("<foo />")    $("<foo>")

从 the manual :

从提供的原始HTML字符串动态创建DOM元素。

没有属性的简单元素,例如。, "<div />" ,通过 document.createElement .innerHTML a的性质 div

所有的HTML必须格式良好,否则它可能无法在所有浏览器中正常工作。这包括以下情况: $("<span>") 可能不起作用但是 $("<span/>") will(注意XML样式的结束斜杠)。

我不能肯定,但性能方面的第二个选择:

$("<span class=\"foo\"></span>");

通常更好,因为没有额外的字符串串联(例如,将“class='foo'”添加到匹配的span标记中)。

您还可以使用默认的FF/IE/OPERA/ETC源代码查看器在源代码中查看它,而您需要查看DOM的实时视图才能看到这样的结果:

$("<span>").addClass("foo")

选择第二个选项-静态HTML带来了一个小的性能优势,但更重要的是一个严重的可读性优势,这将有助于您最终点击“查看源代码”,试图找出为什么您的元素没有按预期显示。

首先创建一个div元素,如下所示:

<div id="test"></div>

$("<span class=\"foo\"></span>").appendTo("div#test");

考虑到你真正的问题是关于风格和哪个是首选的,我已经为“两者都不是”给出了答案,并且抛出了一个我最近发现的很棒的插件,它在保持HTML和javascript的分离方面做得非常出色。这个插件被称为 tempest