jQuery creating elements - another .attr() vs .prop() question [duplicate]

Question

Possible Duplicate:
.prop() vs .attr()

Given the new .prop() method in jQuery, which is the preferred way to create a new element with particular fields, e.g. a link:

1. $('<a>').prop('href', '...');
2. $('<a>').attr('href', '...');
3. $('<a href="...">');

I've always tended to use #2, but it's unclear whether a new element being put in the DOM shouldn't now use #1 instead.

Answer 1

I would go with attr() in that case. You're creating a new <a> element and setting its href HTML attribute, so it would make sense to emphasize that.

However, since the href attribute directly maps to the href DOM property, using prop() would have the exact same result.

Let's take another example, more relevant to the differences between attr() and prop(): suppose you want to set the class attribute of the <a> element instead of its href. The sample code in your question becomes:

1. $('<a>').prop('className', '...');
2. $('<a>').attr('class', '...');
3. $('<a class="...">');

IMHO, (2) and (3) make one's intent clearer than (1). The fact that there cannot be a DOM property named class, because that token might be a reserved word in the host language, is at best an implementation detail. The class HTML attribute is usually what we're thinking about in that context.

Of course, there are situations where the opposite is true, e.g. when working with "boolean" HTML attributes like checked or disabled. In that case, it would be more robust to set the strongly-typed DOM property instead of creating the less well-defined HTML attribute.