Question

使用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"

Answer 1

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

Answer 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-]*))$/

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

我会说，除非您需要它，否则请使用document.createElement('div')代替$('<div></div>')。

Answer 3

它使用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等

Answer 4

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

Answer 5

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

jQuery如何创建DOM元素

5 个答案: