javascript - 使用 jQuery 创建 HTML 元素 : what’s the correct approach?

Question

最近我做了一个Backbone tutorial over on Tuts+我看到了一种使用 jQuery 创建 HTML 元素的非常奇怪的方法，作者说要像这样创建它:

var select = $('</select>', {
    html: '<option value="all">All</option>'
});

但我认为这肯定是不正确的，所以我只是更改了 select元素没有正斜杠:

var select = $('<select>', {
    html: '<option value="all">All</option>'
});

所以在我完成教程后，我看了一下评论，一位评论者说应该这样写:

var select = $('<select/>', {
    html: '<option value="all">All</option>'
});

这也很好用，但我很困惑:三者之间有什么区别？我确信第一个( </select> )不起作用，但是使用 <select/> 的优点是什么？超过<select> ？它甚至有什么区别吗？

提前致谢。

Answer 1

列表中的第一个不起作用，其他两个的作用相同。

就我个人而言，我更喜欢使用<select>因为对我来说这是最具可读性的。如果您喜欢添加斜杠，那就这么做吧 - 它会工作得很好，这只是可读性的问题。

您还可以使用$("<select></select>")如果你愿意的话，尽管对我来说这又变得更困惑了。

此外，为了添加选项，最好像执行选择一样添加它们，而不是将原始 html 编码为字符串，例如:

var options = [];

for (var i = Options.length - 1; i >= 0; i--) {
    options.push($("<option>", {
       html: Options[i].Title,
       value: Options[i].Value
    }));
}

var select = $("<select>", {
    html: options,
    id: "OptionSelector"
});

正如下面 David 所指出的，$("<select>")根据文档，这是正确的方法，因此尽管在我的(有限的)测试中其他方法的行为正常，但最好还是这样做。