Set multiple attributes with jquery

Question

Somewhere I've made a mistake in the btn.attr() but can't find it. Or apparently it doesn't work like I thought it would,so now I'm confused. I could do it in javascript with "with" but I'd love to learn how to do it in jquery also. So here is the code:

function setattr(id, value) {
    var btn = document.createElement('input');
    btn.setAttribute('type', 'button');
    btn.attr({
        id: id,
        class: "btnclass", 
        value: "value"
        });};

Could I have also used $(this) somehow?

Yeah still it doesn't work. Check my comment on the correct answer — viper
– viper, Commented May 24, 2013 at 9:30

2 revs · Accepted Answer · 2013-05-24 09:29:55Z

7

That's the right way but

you have a syntax problem (string "value" not closed)
btn is a DOM element, not a jQuery one
class is a reserved word

Do this :

$(btn).attr({
    id: id,
    "class": "btnclass", 
    value: "value"
});

Note that those errors should have been spotted by looking at your browser's console.

edited May 24, 2013 at 9:29

community wiki

2 revs
dystroy

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

2 Comments

viper Over a year ago

That's excellent. That's the answer I was expecting. Well class was the problem. Value I added it here in stackoverflow. It wasn't in the original code and I also tried $(btn) but obviously class the error. It's a greasemonkey script so there is no debugging unfortunately :( Thank you very much. I'll accept your answer in 4 mins :)

viper Over a year ago

Actually "class" is not necessary. I just checked it without " " and it works fine. :/ $(btn) must have been the problem. That's weird. I should have done something else wrong when I was trying it.

James Donnelly · Accepted Answer · 2013-05-24 09:25:51Z

0

Rather than:

var btn = document.createElement('input');
...

You can simply:

var btn = $('<input type="button" id="'+id+'" class="btnclass" value="value"/>');

You can then assign this to your page using .appendTo(), .prependTo(), or various other methods jQuery provides.

JSFiddle example.

answered May 24, 2013 at 9:25

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

1 Comment

James Donnelly Over a year ago

Cleaner and readable? You can always separate the attributes into an object as Palash Mondal's answer below does if you want it to be "cleaner and readable". It's basically the same thing though.

palaѕн · Accepted Answer · 2013-05-24 09:28:39Z

0

Using jQuery you can do this:

function setattr(id, value) {
    var $btn = $('<input/>', {
        id: id,
        class: "btnclass",
        type: 'button',
        value: value
    });
}

Please, don't forget to append the new btn to an element.

answered May 24, 2013 at 9:28

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Pragnesh Chauhan · Accepted Answer · 2013-05-24 09:38:21Z

0

try this Demo

function setattr(id, value) {
var btn = document.createElement('input');

 $(btn).attr({
    type: 'button',
    id: id,
    class: "btnclass", 
    value: value
});
//bind event
$(btn).on('click', function(){
  alert('work....');
});
  $('body').append(btn);
};

answered May 24, 2013 at 9:38

Pragnesh Chauhan

8,49410 gold badges46 silver badges58 bronze badges

2 Comments

James Donnelly Over a year ago

bind() is deprecated, you should use on() instead.

Pragnesh Chauhan Over a year ago

@JamesDonnelly yes, I have changed :)

Collectives™ on Stack Overflow

Set multiple attributes with jquery

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related