javascript - Combo buttons display improperly when created using jQuery -

i using jquery create set of combo buttons in chrome extension:

for( var = 0, format; format = phoneformats[i]; ++i ) {     var input = $('<input>', {         style: 'width: 400',         type: 'radio',         name: 'phone-format-radio',         value: i,         text: getdisplaynumber( format )     }).after( '<br/>' );      $(id + ' > button').before( input ); } 

there 2 major issues current output. first of all, unless explicitly set width of each input element, width not account text next combo box. secondly, combo buttons appear right of text instead of left of it.

if manually create these combo buttons in html, structure fine. doing wrong jquery?

as far question in comment goes (i.e. "why radio button not being given default width (the size of text) , why radio button on right of text instead of left."), radio buttons (or <input> elements matter) don't have content. so, text gets rendered depends on browser's mood (more or less). usual structure looks this:

<input type="radio" id="x" /><label for="x">your text here</label> 

i've left out attributes weren't necessary illustrate structure. so, want create radio button without text bit id attribute; then, create label element appropriate for attribute , text , drop label after radio button before line break. maybe more work:

for(var = 0, format; format = phoneformats[i]; ++i) {     var input = $('<input>', {         id: 'phone-format-radio-' + i,         style: 'width: 400',         type: 'radio',         name: 'phone-format-radio',         value:     }).after(         '<label for="phone-format-radio-' + + '">'         + getdisplaynumber(format)         + '</label><br/>'     );     $(id + ' > button').before( input ); }