Question

Okay, so I am dealing with a CMS system here which generated wonderful (not) code. I cannot change the way the code/content is generated, but I can add my own JavaScript / jQuery code to rewrite the generated content. I am looking at a form which looks like this …

<table>
    <tr>
        <td>
            First Name<br><input id="first_name_field" name="first_name" value="" type="text">
        </td>
    </tr>
    <tr>
        <td>
            State/Province/Region<br><div id="regstatediv_187"><select name="state" id="state_field" class="inputbox"><option value=" ">Select State/Province/Region</option><option value="ALA">Alabama</option>...</select></div>
        </td>
    </tr>
</table>

I have been playing with the html() and text() functions in jQuery and thus far cannot find a way to select only the text “label” and then wrap it and write it back without destroying the form field in the process. Any suggestions?

Thanks!

Answer 1

Try this

$('table td').contents().filter(function() {
    return this.nodeType == 3;
}).wrap('<span class="label" />');//use any markup you want to wrap with

Demo