Question

I am in a situation

I am appending a button to a div, which has a width

  $('#main').append('<button id="hello" type="button" style="width:100px">Click Me!</button>');

I am trying to change the width however nothing happens

$("#main").prop({ width: '300px'});

Ive tried using .css , .attr and .width to try changing the width however the same problem keeps happening. I am still not sure why this is happening even after googling, if anyone can help that would be great.

Answer 1

If you’re trying to set the width of the button, you’ve got to select the button, not the div.

$('#hello').width(300);

(Demo 1)

If your goal is to set the width immediately after .append()ing, you’re better off just starting with the right width:

$('#main').append($('<button/>', {
    id: 'hello',
    text: 'Click Me!',
    width: 300
}));

(Demo 2)

---

Read up on .width(): http://api.jquery.com/width/#width2 (Yes, the jQuery API docs are down right now.)