Javascript 在jquery中创建元素

因此，我知道如何以各种方式在jQuery中创建元素。但我在今天之前从未遇到过这样的情况：

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

var myspacer=$（“”{
“id”：“导航间隔器”，
“高度”：mynav.outerHeight（）
});

---

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

如果像

$（''）一样传入HTML，jQuery将创建一个新元素，因为它很智能：P它识别字符串是HTML（而不是选择器），并以不同的方式对待它。看

将创建新元素，但在您自己添加它之前不会将其添加到DOM中，例如使用
appendTo（）

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

编辑：我已更正，您可以在不使用明确结束标记的情况下编写
$（“”）
。只要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");

//带有嵌套元素和结束标记-HTML必须格式正确
$（“您好”
”）.appendTo（“body”）；
//如果没有结束标记，HTML仍然是格式良好的
$("", {
“类”：“测试”，
文字：“点击我！”，
单击：函数（）{
$（此）.toggleClass（“测试”）；
}
}).附于（“主体”）；

类似问题：





根据jQuery
$（html，properties）
语法，上面的代码使用
id=“nav spacer”
和
height
创建了一个
div
，由
mynav.outerHeight（）
方法提供，没有任何内容作为jQuery对象，但没有添加到DOM中

在
$（html，properties）
中，
html
是字符串，
properties
是属性/事件等的集合

另一种方法可以是：

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

将使用
class=hello
在
div
之前添加
myspacer
，如：

<div id="nav-spacer" height="some_value"></div>
<div class="hello"></div>



这应该给你你想要的解释=D

总而言之，这是一种快速的JQuery动态元素创建方法。
这是的
$（html，props）
语法-它在以下章节中解释得非常清楚：

html
定义单个独立html元素的字符串（例如
或
）

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

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

新元素不会自动添加到文档中，但您似乎已经看到了这一点，因为您提到了添加新元素的
.before（）
代码。
@zerkms:您可能不需要，但文档说您应该这样做以确保兼容性。@Scotty:哦，对，我不知道这一点，也没有遇到过任何问题。是的，我想知道div上奇怪的结尾。不是我的代码。@ahren:OP不需要知道jQuery的内部（“它是什么类型的对象”）。我不相信这是他真正想问的。“jQuery如何知道如何将其转换为HTML元素？”——用“因为它很聪明”来回答这个问题并没有回答任何问题。另外，我相信他指的是通过html片段传递的
props
对象，而不是html片段本身。答案被接受（一旦时间限制消失）注意
$（html，道具）
只适用于与
（/^（？）？$/）匹配的html。
它不适用于
（这是一个单独的html元素-文档有误导性？），因此
$（''，{text:{hello}）将不起作用（与中一样，
文本
不被应用）。正则表达式匹配的任何内容都将使用
document.createElement
创建，并且
道具
将对其起作用。
<div id="nav-spacer" height="some_value"></div>
<div class="hello"></div>