jQuery document.createElement等价？

我这样做:

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

因为jQuery1.8,使用$.parseHTML()创建元素是更好的选择.

有两个好处:

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

2.更重要的是,如果你使用旧的方式,你可能会受到跨站点攻击(更多信息).如果你有类似的东西:

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

一个坏人可以输入来取笑你.幸运的是,$.parseHTML()避免这种尴尬:

var a = $('
')
// a is [
?
?]
var b = $.parseHTML('
')
// b is [
?
?]
$('')
// jQuery returns [?]
$.parseHTML('')
// jQuery returns []

但是,请注意这a是一个jQuery对象,而它b是一个html元素:

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

UPDATE

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

以前的答案

我觉得和它document.createElement('div')一起使用jQuery更快:

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

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

从jQuery 1.8开始,有一个jQuery.parseHTML()函数,它现在是创建元素的首选方法.另外,解析HTML有一些问题$('(html code goes here)'),例如官方jQuery网站在他们的一个发行说明中提到了以下内容:

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

为了与实际问题相关,提供的示例可以转换为:

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

不幸的是$(),它比使用just更方便,但它可以让你获得更多的控制权,例如你可以选择排除脚本标签(它会留下像这样的内联脚本onclick):

> $.parseHTML('
')
[
?
?]

> $.parseHTML('
', document, true)
[
?
?, ?]

此外,这里是从最佳答案调整到新现实的基准:

JSbin Link

jQuery 1.9.1

  $.parseHTML:    88ms
  $($.parseHTML): 240ms
  
:    138ms
  
:          143ms
  createElement:  64ms

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

var mydiv = $('
') // also works

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

这是认真的吗？不.但是这种语法比$("

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