5

我在我的应用程序中使用 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请求。

4

2 回答 2

24

append("span")不会附加 span 元素，只会附加 text "span"。要附加您需要的跨度元素append('<span>')。

此外，该类将按照您的代码编写方式和 jQuery 工作方式添加到主元素

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

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

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

于 2013-04-07T12:48:42.033 回答
2

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

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

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

于 2013-04-07T12:41:15.770 回答