Question

So, I know how to create an element in jQuery in various ways. But I’ve never come across this before today:

    var myspacer = $('<div />', {
        "id": "nav-spacer",
        "height": mynav.outerHeight()
    });

Later on in the code, this variable is added to the DOM with jQuery’s .before() method. Can somebody explain what’s going on here? What kind of object is being created? How does jQuery know how to turn this into an HTML element?

Answer 1

That is the $( html, props ) syntax of the jQuery() function – it is explained quite clearly in the API documentation:

html A string defining a single, standalone, HTML element (e.g. <div/> or <div></div>).

props An map of attributes, events, and methods to call on the newly-created element.

If the function determines that the first parameter is a string that looks like an html snippet it creates a new element (or elements) from that snippet. If you pass a map in the second parameter it creates the specified attributes on the newly created element.

The new element is not automatically added to the document, but you seem to already have seen that since you mention the .before() code that does add it.