Question

通过将HTML传递给jQuery创建元素时，可以使用多种格式，例如：

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

等...

是否有一种风格比其他风格更好？

Answer 1

我之前认为没有区别，但我正在查看hks在this other question中发布的代码，并且它显示了IE中的一些不一致。为了调查，我整理了一张桌子。

看看这里的结果： 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

在IE浏览器中非常不一致，但在Firefox和Chrome中，所有表单都运行良好。

所有浏览器中唯一一致的方法是：

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

来自the manual：

从提供的原始HTML字符串中即时创建DOM元素。

没有属性的简单元素，例如"<div />"，是通过document.createElement创建的。通过将字符串分配给.innerHTML元素的div属性来解析所有其他情况。 HTML字符串不能包含div中无效的元素，例如html，head，body或title元素。

所有HTML必须格式正确，否则可能无法在所有浏览器中正常运行。这包括$("<span>")可能不起作用但$("<span/>")将起作用的情况（请注意XML样式的结束斜杠）。

Answer 2

我不能肯定地说，但表现明智的第二种选择：

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

通常更好，因为没有额外的字符串连接（即将“class ='foo'”添加到匹配的span标记中。

您还可以使用默认的FF / IE / OPERA / ETC源查看器在源代码中查看它，而您需要查看DOM的实时视图以查看结果：

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

选择第二个选项 - 静态HTML带来轻微的性能优势，但更重要的是一个严重的可读性优势，可帮助您最终点击“查看源”以试图找出您的元素未按预期显示的原因。

Answer 3

首先创建一个div元素，如下所示：

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

然后您可以使用以下代码轻松完成此操作：

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

您还可以使用任何其他html元素，例如table而不是div。

希望这会对你有所帮助。

Answer 4

鉴于你的实际问题是关于风格，而且我更喜欢这个问题，我已经为'不'做出了回答，并且抛出了一个我最近发现的一个很棒的插件，它可以很好地保持HTML和javascript的分离。该插件名为tempest

jQuery元素构造函数 - 这是推荐的方法吗？

4 个答案: