jQuery HTML element selector clarification

Question

I would like to know what is the difference between these two jQuery selectors:

$("span")
$("<span>")

I know that the former is used to select all elements of the provided HTML tag type in the page (which is specified in the jQuery Element Selector documentation). I am not sure what the latter selector does.

Apologies if this question is a duplicate. If so, please kindly post the URI of the duplicated question.

Explained in `jQUery()` method docs. 2 sections to doc, covering both cases http://api.jquery.com/jQuery/ — charlietfl, Dec 26 '12 at 02:33

score 2 · Answer 1 · edited May 23 '17 at 12:12

2

$("span") //Finds all span
$("<span>") //Create a span element

See this answer : jQuery document.createElement equivalent?

edited May 23 '17 at 12:12

Community

1
1

answered Dec 26 '12 at 02:33

Akhil Sekharan

12,467
7
40
57

Sampson · Accepted Answer · 2012-12-26T02:35:48.433

The first goes out and finds all existing span elements. The second creates a new span element, wrapped in a jQuery object.

$("span").css("color", "red"); // Make all current <span> elements red
$("<span>").text("Foo").appendTo("body"); // Create new <span>, add to <body>

Optional Second Arguments

Both can take a second argument as well. In the case of the first, the second argument is the context:

$("span", "#foo"); // Becomes $("#foo").find("span");

In the case of the second, the second argument is an object-literal consisting of properties:

$("<span>", { 
    "html": "This is the HTML", 
    "class": "newSpan"
}).appendTo("body");

This is similar to calling the individual methods to set html and attributes:

$("<span>")
    .html("This is the HTML")
    .attr("class", "newSpan")
    .appendTo("body");

jQuery HTML element selector clarification

2 Answers2

Optional Second Arguments