What's the best way to fix this radio button HTML?

Question

I'm working with a shopping cart product that puts out some rather old fashioned HTML. Since it's dynamically generated by the cart, PDG Commerce, I don't have control of the HTML tag structure.

Here's a sample:

<p class='ups_address_suggest'>
    <input type="radio" name="addrvalselect" value="3" onclick="setaddr2();">DULUTH, MN &nbsp;&nbsp;55810 
    <input type="radio" name="addrvalselect" value="4" onclick="setaddr3();">DULUTH, MN &nbsp;&nbsp;55811 
    <input type="radio" name="addrvalselect" value="5" onclick="setaddr4();">DULUTH, MN &nbsp;&nbsp;55812 
    <input type="radio" name="addrvalselect" value="6" onclick="setaddr5();">HERMANTOWN, MN &nbsp;&nbsp;55810 
    <input type="radio" name="addrvalselect" value="7" onclick="setaddr6();">HERMANTOWN, MN &nbsp;&nbsp;55811 
    <input type="radio" name="addrvalselect" value="8" onclick="setaddr7();">BOWDON JUNCTION, GA &nbsp;&nbsp;30109 
</p>

As shown above it outputs the radio buttons with text next to them, which is not in a label element.

I'm trying to style this so it looks decent. So far I've tried applying CSS to the input elements (display:block, float:left, etc) but that leaves the text in odd places like the next line or all bunched together while the buttons float left.

Using jQuery, I've been unable so far to get the text and input as a unit to wrap them in a label or <p> or whatever.

Here's how the current output looks in a browser:

Any suggestions for a javascript and/or jQuery way to fix this? Or a way to have the buttons formatted neatly next to the text labels using just CSS.

Answer 1

This works for me in the console (Chrome):

jQuery:

$('p.ups_address_suggest input').each(function (i, elem) {
    var self = $(elem),                             // cache DOM lookup
        text = $(elem.nextSibling).detach(),        // remove text and jQuerify
        label = $('<label />').text(text.text());   // add to a new label
    label.insertAfter(self);                        // insert label into DOM
});

CSS:

p.ups_address_suggest input, p.ups_address_suggest label {float: left;}
p.ups_address_suggest input {clear: left;}

Here's a fiddle: http://jsfiddle.net/xb42s/

Answer 2

Here is a solution i came up with. It's not perfect, but it works for that case:

$('p.ups_address_suggest').html(
    $('p.ups_address_suggest').html().replace(/(\<input.*?\d{5})/g,'<label>$1</label>')
);

The regex searches from <input.. until 5 digits and wraps that in a label. That should give you more styling options.

http://jsfiddle.net/nxFbN/