jQuery document.createElement 等效？

这是您在“一”行中的示例。

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

更新：我想我会更新这篇文章，因为它仍然有相当多的流量。在下面的评论中有一些关于 $("<div>") vs $("<div></div>") vs $(document.createElement('div')) 作为创建新元素的方式的讨论，这是“最好的”。

我把 a small benchmark 放在一起，大致是重复上述选项 100,000 次的结果：

jQuery 1.4、1.5、1.6

               Chrome 11  Firefox 4   IE9
<div>            440ms      640ms    460ms
<div></div>      420ms      650ms    480ms
createElement    100ms      180ms    300ms

jQuery 1.3

                Chrome 11
<div>             770ms
<div></div>      3800ms
createElement     100ms

jQuery 1.2

                Chrome 11
<div>            3500ms
<div></div>      3500ms
createElement     100ms

我认为这不足为奇，但 document.createElement 是最快的方法。当然，在你开始重构整个代码库之前，请记住我们在这里讨论的差异（除了 jQuery 的古老版本之外）相当于每千个元素额外增加 3 毫秒。

更新 2

更新了 jQuery 1.7.2 并将基准放在 JSBen.ch 上，这可能比我的原始基准更科学，而且现在可以众包了！

http://jsben.ch/#/ARUtz

---

只需将要添加到 jQuery 构造函数的元素的 HTML 提供给 jQuery 构造函数 $() 将从新建的 HTML 返回一个 jQuery 对象，适合使用 jQuery 的 append() 方法附加到 DOM 中。

例如：

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

然后，您可以根据需要以编程方式填充此表。

这使您能够指定您喜欢的任意 HTML，包括类名或其他属性，您可能会发现这比使用 createElement 然后通过 JS 设置 cellSpacing 和 className 等属性更简洁。

---

创建新的 DOM 元素是 jQuery() 方法的核心功能，请参阅：

http://api.jquery.com/jQuery/#creating-new-elements

特别是 http://api.jquery.com/jQuery/#example-1-1

---

我正在这样做：

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');

---

由于 jQuery1.8，使用 $.parseHTML() 创建元素是更好的选择。

有两个好处：

1.如果您使用旧的方式，可能类似于 $(string)，jQuery 将检查字符串以确保您要选择一个 html 标记或创建一个新元素。通过使用 $.parseHTML()，您告诉 jQuery 您要显式创建一个新元素，因此性能可能会好一些。

2.更重要的是，如果您使用旧方式，您可能会遭受跨站点攻击（more info）。如果你有类似的东西：

    var userInput = window.prompt("please enter selector");
    $(userInput).hide();

坏人可以输入 <script src="xss-attach.js"></script> 来逗你。幸运的是，$.parseHTML() 为您避免了这种尴尬：

var a = $('<div>')
// a is [<div>​</div>​]
var b = $.parseHTML('<div>')
// b is [<div>​</div>​]
$('<script src="xss-attach.js"></script>')
// jQuery returns [<script src=​"xss-attach.js">​</script>​]
$.parseHTML('<script src="xss-attach.js"></script>')
// jQuery returns []

但是，请注意 a 是一个 jQuery 对象，而 b 是一个 html 元素：

a.html('123')
// [<div>​123​</div>​]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>​123​</div>​]

---

更新

在 jQuery 的最新版本中，以下方法不会分配在第二个 Object 中传递的属性

上一个答案

我觉得将 document.createElement('div') 与 jQuery 一起使用会更快：

$(document.createElement('div'), {
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');

---

虽然这是一个非常古老的问题，但我认为用最近的信息更新它会很好；

从 jQuery 1.8 开始，有一个 jQuery.parseHTML() 函数，它现在是创建元素的首选方式。此外，通过 $('(html code goes here)') 解析 HTML 存在一些问题，例如官方 jQuery 网站在 one of their release notes 中提到以下内容：

轻松的 HTML 解析：您可以再次在 $(htmlString) 中的标记之前使用前导空格或换行符。我们仍然强烈建议您在解析从外部来源获得的 HTML 时使用 $.parseHTML()，并且将来可能会对 HTML 解析进行进一步的更改。

为了与实际问题相关，提供的示例可以翻译为：

this.$OuterDiv = $($.parseHTML('<div></div>'))
    .hide()
    .append($($.parseHTML('<table></table>'))
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

不幸的是，这不如仅使用 $() 方便，但它为您提供了更多控制权，例如您可以选择排除脚本标签（但它会留下像 onclick 这样的内联脚本）：

> $.parseHTML('<div onclick="a"></div><script></script>')
[<div onclick=​"a">​</div>​]

> $.parseHTML('<div onclick="a"></div><script></script>', document, true)
[<div onclick=​"a">​</div>​, <script>​</script>​]

此外，这是根据新现实调整的最佳答案的基准：

JSbin Link

jQuery 1.9.1

$.parseHTML:    88ms
  $($.parseHTML): 240ms
  <div></div>:    138ms
  <div>:          143ms
  createElement:  64ms

看起来 parseHTML 比 $() 更接近 createElement，但是在将结果包装在一个新的 jQuery 对象中之后，所有的提升都消失了

---

var mydiv = $('<div />') // also works

---

var div = $('<div/>');
div.append('Hello World!');

是在 jQuery 中创建 DIV 元素的最短/最简单的方法。

---

我刚刚为此制作了一个小型 jQuery 插件：https://github.com/ern0/jquery.create

它遵循您的语法：

var myDiv = $.create("div");

DOM 节点 ID 可以指定为第二个参数：

var secondItem = $.create("div","item2");

严重吗？不，但是这种语法比 $("

") 更好，而且物有所值。

我是一个新的 jQuery 用户，从具有类似功能的 DOMAssistant 切换：http://www.domassistant.com/documentation/DOMAssistantContent-module.php

我的插件更简单，我认为 attrs 和 content 最好通过链接方法添加：

$("#container").append( $.create("div").addClass("box").html("Hello, world!") );

此外，它是一个简单的 jQuery 插件（第 100 个）的一个很好的例子。

---

这一切都很简单！这里有几个简单的例子......

var $example = $( XMLDocRoot );

var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});

var $example.find('parent > child').append( $element );

---

以前的答案中没有提到，所以我添加了如何使用最新的 jQuery 创建元素元素的工作示例，以及内容、类或 onclick 回调等附加属性：

const mountpoint = 'https://jsonplaceholder.typicode.com/users' const $button = $('button') const $tbody = $('tbody') const loadAndRender = () => { $.getJSON(mountpoint) .then(data => { $.each(data, (index, { id, username, name, email }) => { let row = $('') .append($('' , { text: id })) .append($('', { text: username, class: 'click-me', on: { click: _ => { console.log(name) } } } )) .append($('', { text: email })) $tbody.append(row) }) }) } $button.on('click', loadAndRender) .click-me { background-颜色：浅灰色 }

< /thead>

ID	用户名	邮箱

加载和渲染