11

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.

Community
  • 1
  • 1
Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • 1
    NOT A DUPLICATE. The linked question is primarily about property and attribute **getters**. This question is exclusively about **setters**, and even more specifically about their application to a newly created DOM element. The answer to this question is only obliquely addressed on the linked page. – Bob Stein Mar 17 '16 at 21:45
  • @BobStein-VisiBone you could vote to reopen, if you have enough rep, but I did get the answer I was looking for (below) – Alnitak Mar 17 '16 at 22:19
  • Thanks @Alnitak I have my answer too. Just leaving a tip for posterity in lieu of sufficient rep to reopen (3K I think). – Bob Stein Mar 17 '16 at 22:23

2 Answers2

13

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.

Frédéric Hamidi
  • 258,201
  • 41
  • 486
  • 479
  • 2
    +1 For a detailed explanation instead of _why_ instead of just a "because I said so" answer – Chad May 05 '11 at 17:34
7

I usually would create the a tag like so:

$('<a>', {href: '...'});

Adds as many attributes to the element at the start. (yes attributes, not properties)

So you can do the same thing for items like inputs:

      $('<input>',{
                name: 'some_name',
                id: 'some_id',
                value: item_value,
                readonly: 'true',
                style: 'background: #eee;',
                size: 15
            });

Or actual divs:

      $('<div>',{
                id: 'some_id',
                text: 'this will be inside the div'
            });

Here is a fiddle example: http://jsfiddle.net/maniator/mbjgd/

EDIT
From my comment below:

The reason for this is because when you create the item, you are creating it by setting it's attributes, later on those attributes become meaningless when they are changed by something like javascript, so at that point you have to use the object's properties to get the real solution that you might be looking for.

Naftali
  • 144,921
  • 39
  • 244
  • 303
  • interesting - I wasn't aware of that syntax. – Alnitak May 05 '11 at 16:42
  • i use it all the time for defining many object like inputs for example: `$('',{ name: item.name, id: item.id, value: item_value, readonly: 'true', style: 'background: #eee;', size: 15 });` – Naftali May 05 '11 at 16:43
  • @Alnitak, i edited by post to show you better. i will add a fiddle as well – Naftali May 05 '11 at 16:51
  • thanks, although we're still missing a decent rationale for why attributes rather than properties in this case, when after the fact people now mostly appear to advise the latter. – Alnitak May 05 '11 at 16:57
  • @Alnitak, this is bc when you create the item, you are creating it by setting it's attributes, later on those attributes become meaningless when they are changed by something like javascript, so at that point you have to use the object's properties to get the real solution that you might be looking for – Naftali May 05 '11 at 16:59
  • Another advantage to this method, as far as I can tell, you can use **reserved words** for the attributes, e.g. `class: 'some-class', type: 'text'`. I know for .prop() at least you'd need to use className instead of class. – Bob Stein Mar 17 '16 at 21:58