Question

所以，我知道如何以各种方式在jQuery中创建一个元素。但是我在今天之前从未遇到过这个问题：

    var myspacer = $('<div />', {
        "id": "nav-spacer",
        "height": mynav.outerHeight()
    });

稍后在代码中，使用jQuery的.before（）方法将此变量添加到DOM中。有人能解释一下这里发生了什么吗？正在创建什么样的对象？ jQuery如何知道如何将其转换为HTML元素？

Answer 1

这是jQuery() function的$( html, props )语法 - 在the API documentation中已经非常清楚地解释了这一点：

html定义单个独立HTML元素的字符串（例如<div/>或<div></div>）。

props调用新创建元素的属性，事件和方法的映射。

如果函数确定第一个参数是一个看起来像html片段的字符串，它会从该片段创建一个或多个新元素。如果在第二个参数中传递地图，则会在新创建的元素上创建指定的属性。

新元素不会自动添加到文档中，但您似乎已经看到了，因为您提到了所做的.before()代码添加它。

Answer 2

根据jQuery $( html, properties)语法，上面的代码创建div id="nav-spacer"和height由mynav.outerHeight()方法提供，没有任何内容作为jQuery对象但没有添加到DOM。

在$( html, properties)中，html是字符串，properties是属性/事件的集合，依此类推。

另一种方法可能是：

var myspacer = $('<div id="nav-spacer" height="'+ mynav.outerHeight() +'"></div>');

但是你的更具可读性和效率。

使用 .before() 方法myspacer在.before()作为参数传递选择器之前添加到DOM。例如：

myspacer.before('div.hello');

将myspacer添加到div class=hello之前添加<div id="nav-spacer" height="some_value"></div> <div class="hello"></div>：

{{1}}

Answer 3

如果您传递像$('<div/>')这样的HTML，jQuery会创建一个新元素，因为它很聪明。：P它识别字符串是HTML（而不是选择器）并以不同方式对待它。请参阅docs。

创建新元素但不添加到DOM，直到您自己添加它，例如。与appendTo()。

来自documentation：“为了确保跨平台兼容性，代码段必须格式正确。可以包含其他元素的代码应与结束标记配对。” < / p>

修改：我已经纠正了，您可以编写$('<div/>') ，而无需明确的结束标记。只要HTML不包含嵌套元素（当然），这就可以工作。请参阅文档中的其他示例：

// With nested elements and closing tags - HTML must be well formed
$("<div><p>Hello</p></div>").appendTo("body");

// Without closing tag - HTML is still well formed
$("<div/>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

类似的问题：

Answer 4

http://api.jquery.com/jQuery/#jQuery2

这应该为您提供您正在寻找的解释= D.

总而言之，它是一种快速的JQuery动态元素创建方法。

在jquery中创建一个元素

4 个答案: