在jquery中创建一个元素

creating an element in jquery

本文关键字：一个 元素 jquery 创建      更新时间：2023-12-13

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

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

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

这是jQuery()函数的$( html, props )语法-API文档中对此有非常清楚的解释：

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

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

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

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

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

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

另一种方法可能是：

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

但你的这本书可读性更强，效率更高。

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

myspacer.before('div.hello');

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

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

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

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

文档中："为了确保跨平台兼容性，代码段必须格式良好。可以包含其他元素的标签应该与结束标签配对。"

编辑：我已经纠正了，您可以在没有显式结束标记的情况下写入$('<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等效
  • 在jQuery中创建div元素
  • 使用jQuery创建HTML元素最有效的方法是什么

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

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

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

相关文章：