jQuery document.createElement 等价物？

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

例如：

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

然后，如果需要，可以通过编程方式填充此表。

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

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

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

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

我整理了一个小型基准测试，以下是重复上述选项 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

j查询 1.3

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

j查询 1.2

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

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

更新 2

针对 jQuery 1.7.2 进行了更新，并设置了可能比我的原始基准测试更科学的基准测试，而且现在可以众包！JSBen.ch

http://jsben.ch/#/ARUtz

开箱即用的 jQuery 没有等效的 createElement。事实上，jQuery的大部分工作都是在内部使用innerHTML完成的，而不是纯粹的DOM操作。正如亚当上面提到的，这就是你如何获得类似的结果。

还有一些插件可以在 innerHTML 上使用 DOM，例如 appendDOM、DOMEC 和 FlyDOM 等等。性能方面，原生jquery仍然是性能最高的（主要是因为它使用innerHTML）

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

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 );

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

• http://api.jquery.com/jQuery/#creating-new-elements
• 特别是 http://api.jquery.com/jQuery/#example-1-1

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

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

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

我就是这样做的：

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

因为，使用 $.parseHTML（） 创建元素是更好的选择。jQuery1.8

有两个好处：

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

2.更重要的是，如果您使用旧方式，您可能会遭受跨站点攻击（更多信息）。如果您有类似情况：

    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 []

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

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插件：https://github.com/ern0/jquery.create

它遵循您的语法：

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

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

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

严重吗？不。但是这个语法比$（“<div></div>”）要好，而且物有所值。

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

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

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

此外，对于一个简单的 jQuery 插件（第 100 个）来说，这是一个很好的例子。

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

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

轻松的 HTML 解析：您可以再次使用前导空格或 $（htmlString） 中标记前的换行符。我们仍然强烈建议 在解析从外部获取的 HTML 时使用 $.parseHTML（） 来源，并且可能会对 前途。

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

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 链接

j查询 1.9.1

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

它看起来更接近于 ，但是在将结果包装在新的 jQuery 对象中后，所有提升都消失了parseHTMLcreateElement$()

在之前的答案中没有提到，所以我正在添加如何使用最新的 jQuery 创建元素元素的工作示例，以及 content、class 或 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 = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)

.click-me {
  background-color: lightgrey
}

<table style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<button>Load and render</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

例如，当您想在<option><select>

$('<option/>')
  .val(optionVal)
  .text('some option')
  .appendTo('#mySelect')

显然，您可以应用于任何元素

$('<div/>')
  .css('border-color', red)
  .text('some text')
  .appendTo('#parentDiv')

jQuery中的create元素

$(function(){
  
  // basically using this: $('<element>')
  let newInputElement = $('<input>').attr('type', 'text').attr('name', 'title').val('hello world')
  $('.parent').append(newInputElement)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
Contents...
</div>