In the jQuery core initialization process, specifically when handling the $() constructor, the library performs a detailed check on the input selectors. When an HTML string is detected, jQuery determines whether to treat it as a structural creation task. The logic hinges on the match array derived from the internal rquickExpr regex.

Contextual Handling in DOM Creation

When match[1] contains an HTML tag (e.g., <li>), jQuery prepares to generate DOM nodes. If a context is provided, it must be resolved into a native DOM reference. The follownig snippet ensures that if a jQuery object is passed as a context, it is unwrapped to its native element:

// Normalize context to a native DOM element
const ownerNode = (context instanceof jQuery) ? context[0] : context;

// Parse the HTML string into a collection of DOM nodes
const nodeCollection = jQuery.parseHTML(
   match[1],
   (ownerNode && ownerNode.nodeType) ? (ownerNode.ownerDocument || ownerNode) : document,
   true
);

// Merge the newly created nodes into the current jQuery instance
jQuery.merge(this, nodeCollection);

The jQuery.parseHTML function converts the raw string into an array of native DOM nodes. By passing the third argument as true, jQuery explicitly allows the execution of scripts contained within the parsed HTML, which would otherwise be ignored for security and standard compliance reasons.

Internal Merging Logic

The use of jQuery.merge(this, nodeCollection) is fundamental to jQuery's object-oriented architecture. Since the jQuery instance (this) mimics an array-like structure with a length property, merge appends the new DOM elements to the existing object. This transformation allows developers to access the internal elements directly via index (e.g., $('li')[0]).

Handling Attributes and Property Maps

When the input is a single tag paired with an object containign properties (e.g., $('<div/>', { title: 'test', css: { color: 'red' } })), jQuery iterates through the provided object to apply attributes or execute relevant jQuery methods:

if (isSingleTag && jQuery.isPlainObject(attributes)) {
   for (const key in attributes) {
       // If the key corresponds to a jQuery method, invoke it
       if (typeof this[key] === 'function') {
           this[key](attributes[key]);
       } else {
           // Otherwise, treat it as a standard attribute
           this.attr(key, attributes[key]);
       }
   }
}
return this;

This design enables a shorthand syntax where properties like html, css, or val are automatically invoked as methods on the new object, while standard attributes are handled via .attr(). The process concludes by returning this, providing a chainable jQuery instance populated with the newly initialized DOM nodes.