I use a treeview control in my webform in ASP.NET and the rendered HTML is like this:
<td class="SingleCheckbox ctl00_ContentPlaceHolder1_FormView1_TreeView1_2" style="white-space:nowrap;">
<input type="checkbox" name="ctl00_ContentPlaceHolder1_FormView1_TreeView1n32CheckBox" id="ctl00_ContentPlaceHolder1_FormView1_TreeView1n32CheckBox">
<span class="ctl00_ContentPlaceHolder1_FormView1_TreeView1_0 SingleCheckbox ctl00_ContentPlaceHolder1_FormView1_TreeView1_1" id="ctl00_ContentPlaceHolder1_FormView1_TreeView1t32" style="border-style:none;font-size:1em;">
Admissions and Jobs
</span>
</td>
I want to replace this span with a label for = "id of checkbox" to apply styles on it.
I tried some search on jQuery to access these tags and use .html("")
but this one replaces the text inside the span not the span itself.
I want the result to be
<td class="SingleCheckbox ctl00_ContentPlaceHolder1_FormView1_TreeView1_2" style="white-space:nowrap;">
<input type="checkbox" name="ctl00_ContentPlaceHolder1_FormView1_TreeView1n32CheckBox" id="ctl00_ContentPlaceHolder1_FormView1_TreeView1n32CheckBox">
<label for="ctl00_ContentPlaceHolder1_FormView1_TreeView1n32CheckBox" class="ctl00_ContentPlaceHolder1_FormView1_TreeView1_0 SingleCheckbox ctl00_ContentPlaceHolder1_FormView1_TreeView1_1" id="ctl00_ContentPlaceHolder1_FormView1_TreeView1t32" style="border-style:none;font-size:1em;">
Admissions and Jobs
</label>
</td>
NOTE: I can't access these elements by id because every node in the tree has a unique id
You can use jQuery to create a Label. The snippet below will create a new Label element after the CheckBox with the correct "for" and hides the span
Or create an ASP.NET adapter to generate customized html. But that is much more complex. See Change the css styling of a checkboxlist in table ASP.NET