在 jquery 中创建一个元素

Posted 2023-02-22

【中文标题】在 jquery 中创建一个元素

【英文标题】：creating an element in jquery

【发布时间】：2012-07-19 07:28:03

【问题描述】：

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

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

稍后在代码中，这个变量通过 jQuery 的 .before() 方法添加到 DOM。有人可以解释这里发生了什么吗？正在创建什么样的对象？ jQuery 是如何知道如何将其转换为 html 元素的？

【参考方案1】：

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

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

来自documentation：“为确保跨平台兼容性，sn-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");

类似问题：

jQuery document.createElement equivalent? Creating a div element in jQuery What is the most efficient way to create HTML elements using jQuery?

【讨论】：

@zerkms：您可能不需要，但文档说您应该确保兼容性。

@Scotty：哦，对，不知道，也没有遇到任何问题

是的，我想知道关于 div 的奇怪关闭。不是我的代码。

@ahren：OP 不需要知道 jQuery 的内部结构（“它是什么类型的对象”）。我不相信这就是他真正要问的。

"jQuery 是如何知道如何将其转换为 HTML 元素的？" - 用“因为它很聪明”来回答这个问题并没有回答任何问题。另外，我相信他指的是 props 对象通过 html sn-p 传递，而不是 html sn-p 本身。

【参考方案2】：

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

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

另一种方法可能是：

var myspacer = $('<div id="nav-spacer" ></div>');

但你的更易读、更高效。

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

myspacer.before('div.hello');

将在div 之前添加myspacer 与class=hello 类似：

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

【参考方案3】：

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

这应该会给你你正在寻找的解释 =D。

总而言之，这是一种快速的 JQuery on-the-fly 元素创建方法。

【参考方案4】：

这是jQuery() function 的$( html, props ) 语法——在the API documentation 中解释得很清楚：

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

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

如果函数确定第一个参数是一个看起来像 html sn-p 的字符串，它会从该 sn-p 创建一个新元素（或多个元素）。如果你在第二个参数中传递一个映射，它会在新创建的元素上创建指定的属性。

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

【讨论】：

谢谢，在我回来检查之前，我刚刚找到了 API 的那一部分。答案被接受（一旦时间限制消失）

请注意，$( html, props ) 仅 适用于匹配 (/^<(\w+)\s*\/?>(?:<\/\1>)?$/). 的 html 它不适用于 <div asd></div>（这是一个单独的、独立的 html 元素 -文档是否具有误导性？），因此$('<div asd></div>', text: "hello") 将不起作用（如，text 不适用）。任何与正则表达式匹配的内容都将使用document.createElement 创建，props 将对其进行处理。