jQuery：在构造函数中不关闭标签的风险

Posted 2023-02-24

【中文标题】jQuery：在构造函数中不关闭标签的风险

【英文标题】：jQuery: Risk of not closing tags in constructors

【发布时间】：2011-08-21 23:09:09

【问题描述】：

有什么理由我会使用$('<div></div>') 而不是$('<div>')？

或者$('<div><b></b></div>')而不是$('<div><b>')？

在这两种情况下我都喜欢后者，因为它更短。

【参考方案1】：

这取决于您是使用单个标签还是多个标签来创建元素。

如果使用单个标签，jQuery 将使用document.createElement 方法创建元素，因此使用"<div/>" 或"<div></div>" 没有关系。

如果您有多个元素，jQuery 将通过创建 div 元素来创建元素，并将 html 代码放在 innerHTML 属性中。要让浏览器正确解析 HTML 代码，您必须根据您使用的 HTML 版本编写它。如果页面使用 XHTML，则用于创建元素的 HTML 代码也必须是 XHTML。

【参考方案2】：

jQuery会自动为你关闭标签，不用自己关闭。

$('<div>') 是一件非常好的事情

但是，在第二件事中，您要附加 <b> 我会这样做：

$('<div>',html: $('<b>')); // or $('<div>').append($('<b>')) 

小提琴：http://jsfiddle.net/maniator/m9wbb/

【讨论】：

我在一定程度上同意$('<div>',html: $('<b>'))...当你开始将这些东西嵌套到 4 层以上时，你的眼睛开始流血。但确实感觉更OO

大声笑，所以你在变量中定义它，从来没有说它是最好的内联，这就是我所做的。

@Neal 是的，这就是我所做的，但是当我不添加类、属性等时，我只是去 str8 $('<div><b></b></div>')

试试jsfiddle.net/ADNjv，它读起来更自然:) 更少的空格和括号！

@hunter 或者干脆做：$('<div>').append($('<b>'))

【参考方案3】：

我在 IE 中发现了一些边缘情况，我的代码通过使用$("<div></div>") 而不是$("<div>") 神奇地修复了。我总是出于偏执而这样做。

我确信 jQuery 文档在某些时候明确表示您应该关闭所有标签。 1.6 不再是这种情况，但如果您使用 1.3.2 或 1.4.2，您可能需要关闭它们以确保安全。

虽然如果您查看源代码，我会觉得对于简单的标签来说它是完全安全的。请注意，对于复杂标签或带有属性的标签，来源使用.innerHTML，因此我强烈建议您传入正确的封闭标签。

来源

var rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;

...

// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec(selector);

if (ret) 
    if (jQuery.isPlainObject(context)) 
        selector = [document.createElement(ret[1])];
        jQuery.fn.attr.call(selector, context, true);

     else 
        selector = [doc.createElement(ret[1])];
    

 else 
    ret = jQuery.buildFragment([match[1]], [doc]);
    selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes;
   

在这种情况下使用$("<div>")，您会发现ret[1] 是“div”，因此它调用document.createElement("div")。

【讨论】：

我遇到的一个例子是：$('<span class="manip_link" href="#" onClick="return false;">').text('[remove]'); 这没有出现在 Internet Explorer 6、7 或 8 中。通过说 ... false;" /> 将其变成“自动关闭标签”是一种方法使其在 IE 中工作。

【参考方案4】：

jQuery 会为您做到这一点，但请考虑编写正确的 HTML 以获得更好的可读性（问题中的前者）:)