creating an element in jquery

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.

Answer 2

According to jQuery $( html, properties) syntax, above code creating a div with id="nav-spacer" and height supplied by mynav.outerHeight() method without any content as jQuery object but not added to DOM.

In $( html, properties), html is string and properties is collection of attributes/event and so on.

An alternative approach may be:

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

But your one is more readable and efficient.

Using .before() method myspacer is added to DOM just before the selector passed within .before() as param. Example:

myspacer.before('div.hello');

Will add myspacer before the div with class=hello like:

<div id="nav-spacer" height="some_value"></div>
<div class="hello"></div>

Answer 3

jQuery creates a new element if you pass in HTML like $('<div/>') because it's smart. :P It recognizes that the string is HTML (rather than a selector) and treats it differently. See the docs.

The new element is created but not added to the DOM until you add it yourself, eg. with appendTo().

From the documentation: "To ensure cross-platform compatibility, the snippet must be well-formed. Tags that can contain other elements should be paired with a closing tag."

Edit: I stand corrected, you can write $('<div/>') without an explicit closing tag. This works as long as the HTML doesn't contain nested elements (of course). See the other examples from the docs:

// With nested elements and closing tags - HTML must be well formed
$("<div><p>Hello</p></div>").appendTo("body");

// Without closing tag - HTML is still well formed
$("<div/>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

Similar questions:

• jQuery document.createElement equivalent?
• Creating a div element in jQuery
• What is the most efficient way to create HTML elements using jQuery?

Answer 4

http://api.jquery.com/jQuery/#jQuery2

This should give you the explanation you're looking for =D.

To summarize, it's a quick JQuery on-the-fly element creation method.