JQuery 将 span 类添加到 div 中答案

【问题标题】：JQuery add a span class into a divJQuery 将 span 类添加到 div 中
【发布时间】：2014-04-01 01:08:02
【问题描述】：

我在我的应用程序中使用 jQuery。我的目标是在文本字段旁边显示验证错误，但实际上它替换了 div 内容。

<div class="control-group">
    <label class="control-label">Nom d'équipe</label>
    <div class="controls" id="nom_equipe">
        <input type="text" name="nom_equipe" value="" class="input-xlarge">                 </div>
</div>

所以我用 ajax 检索表单错误，这就是我要做的：

if(data.validate == false)
{
    if(data.nom_equipe != '')
    {
        $("#nom_equipe").append("span").addClass("label label-important").text(data.nom_equipe);
    }
}

但它会像这样替换我的 div id=nom_equipe 的全部内容：

<div class="control-group">
    <label class="control-label">Nom d'équipe</label>
    <div class="controls label label-important" id="nom_equipe">Le champ Nom équipe est requis.</div>
</div>

最后，这是我想要的：

<div class="control-group">
<label class="control-label">Nom d'équipe</label>
<div class="controls" id="nom_equipe">
    <input type="text" name="nom_equipe" value="" class="input-xlarge"> 
    <span>The field nom_equipe is required </span>
            </div>

PS：span div中的内容来自ajax请求。

【问题讨论】：

标签： jquery ajax html

【解决方案1】：

append("span") 不会附加 span 元素，只会附加文本 "span"。要附加一个 span 元素，您需要 append('<span>')。

该类也将添加到主元素中，就像您的代码编写方式和 jQuery 工作方式一样

将 html 字符串与包含的类和文本连接起来需要更少的函数调用，并且通常比调用单个方法来创建元素的代码更少

$("#nom_equipe").append("<span class='label label-important'>"+data.nom_equipe+'</span>');

现有代码的主要问题是，即使使用了链接，text() 正在使用的元素仍然是原始的$("#nom_equipe")。 text('text string') 将替换该元素中的所有 html

【讨论】：

感谢两位的解决方案。由于给出的解释，我把这个答案解决了
@charlietfl 嘿，我的朋友，你怎么会在你的追加中以" 开头并以' 结尾？这真的可能吗？
@IliaRostovtsev 当然是可能的，我可能是因为最初的复制/粘贴而这样做的，但我对另一部分的偏好改为了我自己的偏好。 var str = 'a' + "b" + 'c' 完全有效...所有开引号和右引号都匹配
@charlietfl 哦，是的.. :) 对，你有一个变量。它看起来不太清楚，但你是对的，它完全有效.. 谢谢。

【解决方案2】：

如果你想保留你已有的内容，你需要使用append()而不是text()。

$("#nom_equipe").append("<span class='label label-important'>" + data.nom_equipe + "</span>");

Append() 将参数指定的内容插入到末尾匹配元素集中的每个元素。

【讨论】：

仍然没有使用此解决方案附加跨度，并且类将添加到主元素