jQuery如何创建DOM元素

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文章 。

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 ];
}

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

    /^(?:\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/zh-CN/docs/Web/API/document.createElement即可创建DOM对象。 对于文本节点，请参见https://developer.mozilla.org/zh-CN/docs/Web/API/document.createTextNode

这是新货

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

要找到此类项目，请使用https://developer.mozilla.org/zh-CN/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