jQuery creating HTML elements

Question

I know there are many different ways for creating HTML elements in jQuery, but I've seen people either showing:

$("<div></div>", {attrs...})

or

$("<div/>", {attrs...})

as the primary methods for doing so.

I've found that

$("<div>", {attrs...})

works just fine too.

Why does no one ever show the third method? Are there potential problems with it? As far as the result it concerened, it looks much the same when I inspect element to see the created div.

There is nothing wrong with the third version. Ultimately jQuery recognizes that you want to create a new element. I would assume people don't use that notation because it can be confused easily with an actual selector. — Austin Brunkhorst
– Austin Brunkhorst, Commented Jan 16, 2013 at 6:33
I am using .html(), append(), replaceWith(), insertBefore() and insertAfteR() to create html elements. — gotqn
– gotqn, Commented Jan 16, 2013 at 6:34

Adil · Accepted Answer · 2013-01-16 06:44:36Z

3

Creating the html element with tag like $('<div>'), $("<div>", {attrs...}) is documented way of creating html elmenets check it here.

When the parameter has a single tag (with optional closing tag or quick-closing) — $("<img />") or $("<img>"), $( "<a></a>" ) or $("<a>" ) — jQuery creates the element using the native JavaScript createElement() function.

edited Jan 16, 2013 at 6:44

answered Jan 16, 2013 at 6:37

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2013-01-16 09:12:08Z

Lets look into jQuery source code:

https://github.com/jquery/jquery/blob/master/src/core.js#L85

// Handle HTML strings
if (typeof selector === "string") {
  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];
  }
  // ...
}

So the string just must start with < and end with > to be considered as HTML. All of this variants are valid. I think the reason that <div> is least popular is that it reminds people unclosed tag which is not valid HTML. However jQuery accept it.

Anujith · Accepted Answer · 2013-01-16 06:44:13Z

1

If you're doing $('<div>'), jQuery will also use document.createElement().

(Just take a look at http://code.jquery.com/jquery-1.4.2.js, line 117).

There is some function-call overhead, but unless performance is critical (you're creating hundreds [thousands] of elements), there isn't much reason to revert to plain DOM.

Just creating elements for a new webpage is probably a case in which you'll best stick to the jQuery way of doing things.

answered Jan 16, 2013 at 6:44

Anujith

9,3686 gold badges35 silver badges48 bronze badges

Comments

Varinder Singh · Accepted Answer · 2013-01-16 06:43:36Z

0

As per jQuery 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.

$( "<div></div>" );

But tags that cannot contain elements may be quick-closed or not as follows:

$( "<img />" );
$( "<input>" );

Although <div>, </div> might be working for you in some browser but result may vary browser to browser and even across different versions of same browser.For safe side always stick to standards and documentation best practices.

answered Jan 16, 2013 at 6:43

Varinder Singh

1,6201 gold badge12 silver badges27 bronze badges

1 Comment

metatron Over a year ago

Tags that contain other elements should be well-formed and thus paired with a closing tag. For single elements it doesn't matter, jQuery treats $('<div>', {attrs...}) exactly the same as the alternatives.

Collectives™ on Stack Overflow

jQuery creating HTML elements

4 Answers 4

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Related