How jQuery creates DOM elements

Question

Using jQuery I can create a real DOM node, but it is not located in the DOM. So how does jQuery do it? My guess that it might create it first in the DOM and then removes it.

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


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

Answer 1

I believe jQuery uses document.createElement() to create the specified element. This method creates the node and returns it, but does not attach it to the DOM. See the related MDN article for details on how it works.

Answer 2

It is not a miracle, when you pass <div></div> to jQuery it matches it against the regular expression and tag check conditions like below

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 matches it with below regular expressions to find out the element in the selector string.

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

Once it find the element, then jQuery uses document.createElement("stripped Tag from selector") and will return the element with necessary jQuery methods added.

I would say until and unless you need it for your requirement, use document.createElement('div') instead of $('<div></div>') .

Answer 3

it uses the createElement function which does create a DOM object that is not part of the page. - Just read https://developer.mozilla.org/en-US/docs/Web/API/document.createElement to create DOM objects. For text nodes see https://developer.mozilla.org/en-US/docs/Web/API/document.createTextNode

This is for new items

You can attach it to existing DOM items (part of the page) with appendChild - https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

To find such items use https://developer.mozilla.org/en-US/docs/Web/API/element.getElementsByTagName etc.

Answer 4

JQuery creates an element but it doesn't add it to DOM automatically. I order to see it in the DOM you have to add it to DOM you could use $().after, $().appendTo and so on...

Answer 5

Jquery parse the HTML string using regular expressions and creates a dom element using the code below:

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

It may be easier to inspect the code at this page.

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