Question

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

Answer 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

Answer 2

如果您想保留已有的内容，则需要使用append()代替text()。

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

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

JQuery将一个span类添加到div中

2 个答案: