2

使用 jQuery 我可以创建一个真正的 DOM 节点，但它并不位于 DOM 中。那么jQuery是如何做到的呢？我猜它可能会先在 DOM 中创建它，然后再将其删除。

// here `el` is not a jQuery object
el = $('<div></div>')[0];


console.log(el.tagName);  // "DIV"
console.log(el.nodeType); // "1"
4

5 回答 5

3

我相信 jQuerydocument.createElement()用来创建指定的元素。此方法创建节点并将其返回，但不将其附加到 DOM。有关其工作原理的详细信息，请参阅相关的MDN 文章。

于 2013-09-22T07:59:59.253 回答
2

这不是奇迹，当您传递<div></div>给 jQuery 时，它会将其与正则表达式和标签检查条件进行匹配，如下所示 

if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 
 // Assume that strings that start and end with <> are HTML and skip the regex check
 match = [ null, selector, null ];
}

else 将其与下面的正则表达式匹配以找出选择器字符串中的元素。

    /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/

一旦找到元素，jQuerydocument.createElement("stripped Tag from selector")就会使用并返回添加了必要的 jQuery 方法的元素。

我会说，除非您需要它来满足您的要求，否则请使用document.createElement('div')而不是$('<div></div>').

于 2013-09-22T08:06:16.857 回答
1

它使用createElement创建不属于页面的 DOM 对象的函数。- 只需阅读https://developer.mozilla.org/en-US/docs/Web/API/document.createElement即可创建 DOM 对象。对于文本节点，请参阅https://developer.mozilla.org/en-US/docs/Web/API/document.createTextNode

这是新项目

您可以使用 appendChild 将其附加到现有的 DOM 项目（页面的一部分） - https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

要查找此类项目，请使用https://developer.mozilla.org/en-US/docs/Web/API/element.getElementsByTagName等。

于 2013-09-22T07:54:10.827 回答
0

JQuery 创建一个元素，但它不会自动将其添加到 DOM。我为了在 DOM 中看到它，你必须将它添加到 DOM 中，你可以使用 $().after、$().appendTo 等等...

于 2013-09-22T07:54:42.470 回答
0

Jquery 使用正则表达式解析 HTML 字符串，并使用以下代码创建一个 dom 元素：

parseHTML: function( data, context, keepScripts ) {
    if ( !data || typeof data !== "string" ) {
        return null;
    }
    if ( typeof context === "boolean" ) {
        keepScripts = context;
        context = false;
    }
    context = context || document;

    var parsed = rsingleTag.exec( data ),
        scripts = !keepScripts && [];

    // Single tag
    if ( parsed ) {
        return [ context.createElement( parsed[1] ) ];
    }

    parsed = jQuery.buildFragment( [ data ], context, scripts );
    if ( scripts ) {
        jQuery( scripts ).remove();
    }
    return jQuery.merge( [], parsed.childNodes );
}

在此页面上检查代码可能更容易。

http://james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.parseHTML

于 2013-09-22T08:36:16.330 回答