如何使用 SPAN 或 DIV 将所有内容包装在 TD 元素内

Question

我做错了什么，我的 html 呈现如下：

<td colspan="2"><input id="ctl00_ContentPlaceHolder1_Login1_RememberMe"   
type="checkbox" name="ctl00$ContentPlaceHolder1$Login1$RememberMe" />  
<label for="ctl00_ContentPlaceHolder1_Login1_RememberMe">Remember me next time.  
</label></td>

1. 我想将所有内容包装在 TD 具有跨度。
2. 这个想法是增加文本的字体大小 “下次记得我。”

到目前为止我有这个：

$(document).ready(function() {
        $("input:checkbox").css("border", "none");

        //$("input:checkbox").parent().addclass("checkboxtd");

        var parentTd = $("input:checkbox").parent();
        var prevToCheckBox = $("input:checkbox").prev();

        $(prevToCheckBox).css("border", "solid 1px red"); alert(prevToCheckBox);
        alert(prevToCheckBox.html());

        var parentofParent = parentTd.parent();

        $(parentTd).prepend("<span>");
        $(parentTd).append("</span>"); //+ "</span>"

        //parentTd.before("<div class=\"checkboxtd\"></div>");
        alert(parentTd.parent().html());

        //        $("input:checkbox").css("border", "none").prepend("<span>ss");
        //        $("input:checkbox").css("border", "none").prepend("<span>ss");
        //        $("h2").prepend("<span>ss");
        //        $('h2').append("</span>"); //+ "</span>"
    });

alert(parentTd.parent().html()) 的输出;

<TD colSpan=2><INPUT id=ctl00_ContentPlaceHolder1_Login1_RememberMe 
style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none" type=checkbox name=ctl00$ContentPlaceHolder1$Login1$RememberMe>  
<LABEL for=ctl00_ContentPlaceHolder1_Login1_RememberMe>Remember me next time.
</LABEL></SPAN></TD>

Answer 1

删除这两行：

$(parentTd).prepend("<span>");
$(parentTd).append("</span>"); //+ "</span>"

并使用这一行：

$(parentTd).wrapInner("<span></span>");

Answer 2

尝试直接操作 HTML：

var parentTdHTML = parentTd.html();
parentTd.html("<span>" + parentTdHTML + "</span>");

但是，正如 outis 作为对您的问题的评论所述，您所做的事情是不必要的。您已使用 正确包围了要设置样式的文本，这意味着您可以通过 CSS 轻松更改样式：

label {
    font-size: 110%;
}