JQuery 将 span 类添加到 div 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15862472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery add a span class into a div
提问by TLR
I'm using jQuery in my app. My goal here is to display the validation errors next to the text field, but actually it replaces the div content.
我在我的应用程序中使用 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>
So I retrieve the form errors with ajax and this is what i do :
所以我用ajax检索表单错误，这就是我所做的：
if(data.validate == false)
{
if(data.nom_equipe != '')
{
$("#nom_equipe").append("span").addClass("label label-important").text(data.nom_equipe);
}
}
But it replaces the whole content of my div id=nom_equipe like this :
但它像这样替换了我的 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>
Finally, this is what I wish to have :
最后，这就是我想要的：
<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 : the content into span div comes from the ajax request.
PS：进入span div的内容来自ajax请求。
回答by charlietfl
append("span")will not append a span element, just the text "span". To append a span element you need append('<span>').
append("span")不会附加 span 元素，只附加 text "span"。要附加一个 span 元素，您需要append('<span>').
Also the class will be added to the main element the way your code is written and the way jQuery works
此外，该类将按照您编写代码的方式和 jQuery 的工作方式添加到主元素中
Concatenating the html string with class and text included requires less function calls and is often less code than calling individual methods to create the element
连接包含类和文本的 html 字符串需要较少的函数调用，并且通常比调用单独的方法来创建元素需要更少的代码
$("#nom_equipe").append("<span class='label label-important'>"+data.nom_equipe+'</span>');
The main problem with your existing code is that even with the chaining used, the element that text()is being used on is still the original $("#nom_equipe"). text('text string')will replace all html within that element
您现有代码的主要问题是，即使使用了链接，text()正在使用的元素仍然是原始的$("#nom_equipe"). text('text string')将替换该元素中的所有 html
回答by Adil
You need to use append()instead of text()if you want to retain the contents you already have.
如果要保留已有的内容，则需要使用append()而不是text()。
$("#nom_equipe").append("<span class='label label-important'>" + data.nom_equipe + "</span>");
Append()inserts content, specified by the parameter, to the end of each element in the set of matched elements.
Append()将参数指定的内容插入到匹配元素集中每个元素的末尾。
