Question

The jsfiddle link is http://jsfiddle.net/PrfZy/1/

The code is:

$button = $('<button />', { text: "Some text.", name: "myButton"});
alert($button.attr("name"));
alert($button.attr("text"));

Why is the second alert “undefined”?

Answer 1

The valid attributes for a <button> are name,type,value and disabled (which is actually considered a property and should be set and accessed via prop()).

You can create a custom attribute (which won’t validate) using the attribute setters:

$button = $('<button />').attr('text','Some text.').attr('name','myButton');
alert($button.attr('name'));
alert($button.attr("text"));

http://jsfiddle.net/AlienWebguy/PrfZy/2/

The valid syntax is as follows:

$button = $('<button />').text('Some text.').attr('name','myButton');
alert($button.attr('name'));
alert($button.text());

http://jsfiddle.net/AlienWebguy/PrfZy/3/

Of course, the compromise of the two would be to set a valid HTML5 custom data attribute and access it via data()

$button = $('<button />').attr('data-text','Some text.').attr('name','myButton');
alert($button.attr('name'));
alert($button.data('text'));

http://jsfiddle.net/AlienWebguy/PrfZy/4/