Javascript 如何保护自动添加</部门>；

我有生成内容的javascript代码：

$('#results-list').append('<div class="collapse" id="collapseExample-' + i + '">' + '<span class="label label-primary">Further details</span>');
if (item._source.SenderID != null) {
    $('#results-list').append('<p class="list-group-item-text">Sender ID: ' + item._source.SenderID + '</p>');
}
if (item._source.SenderName != null) {
    $('#results-list').append('<p class="list-group-item-text">Sender: ' + item._source.SenderName + '</p>');
}
if (item._source.ReceiverID != null) {
    $('#results-list').append('<p class="list-group-item-text">Receiver ID: ' + item._source.ReceiverID + '</p>');
}
$('#results-list').append('<hr>' + '</div></div>');

$（“#结果列表”）。附加（“+”进一步详细信息）；
if（item.\u source.SenderID！=null）{
$（“#结果列表”）.append（“
发件人ID:“+item.\u source.SenderID+”
”）；
}
if（item.\u source.SenderName！=null）{
$（“#结果列表”）.append（“
发件人：”+项目。_source.SenderName+”
）；
}
如果（项。\u source.ReceiverID！=null）{
$（“#结果列表”）.append（“
接收者ID:”+项目。_source.ReceiverID+”
）；
}
$（“#结果列表”）.append（“
”+”）；

但它会自动生成以下HTML：

<div style="" aria-expanded="true" class="collapse in" id="collapseExample-1">
    <div class="well">
        <span class="label label-primary">Further details</span>
        <hr>
    </div>
</div>
<p class="list-group-item-text">Sender ID: senderTEST:ZZZ</p>
<p class="list-group-item-text">Receiver ID: receiverTEST:ZZZ</p>

进一步详情

发件人ID:senderTEST:ZZZ
接收方ID:receiverTEST:ZZZ

---

如何避免在

段之前创建
？
您只能将整个元素添加到DOM中，而不能一次添加开始或结束标记。您需要首先在字符串中构建HTML，然后将其追加。试试这个：

var html = '<div class="collapse" id="collapseExample-' + i + '"><span class="label label-primary">Further details</span>';

if (item._source.SenderID != null)
    html += '<p class="list-group-item-text">Sender ID: ' + item._source.SenderID + '</p>';

if (item._source.SenderName != null)
    html += '<p class="list-group-item-text">Sender: ' + item._source.SenderName + '</p>';

if (item._source.ReceiverID != null)
    html += '<p class="list-group-item-text">Receiver ID: ' + item._source.ReceiverID + '</p>';

html += '</div><hr />';
$('#results-list').append(html);

var html='进一步详细信息'；
if（item.\u source.SenderID！=null）
html+='
发件人ID:'+item.\u source.SenderID+'
；
if（item.\u source.SenderName！=null）
html+='
发件人：'+item.\u source.SenderName+'
；
如果（项。\u source.ReceiverID！=null）
html+='
接收者ID:'+item.\u source.ReceiverID+'
；
html+='
'；
$（“#结果列表”）.append（html）；
另一种方法是使用jQuery创建完整的div，然后将其附加到
#results list
元素中

var div = $('<div class="collapse" id="collapseExample-' + i + '"><span class="label label-primary">Further details</span></div>');
if (item._source.SenderID != null) {
    div.append('<p class="list-group-item-text">Sender ID: ' + item._source.SenderID + '</p>');
}
if (item._source.SenderName != null) {
    div.append('<p class="list-group-item-text">Sender: ' + item._source.SenderName + '</p>');
}
if (item._source.ReceiverID != null) {
    div.append('<p class="list-group-item-text">Receiver ID: ' + item._source.ReceiverID + '</p>');
}
div.append('<hr>').appendTo('#results-list');

var div=$（“进一步详细信息”）；
if（item.\u source.SenderID！=null）{
div.append（“
发件人ID:“+item.\u source.SenderID+”
”）；
}
if（item.\u source.SenderName！=null）{
div.append（“
发件人：“+item.\u source.SenderName+”
）；
}
如果（项。\u source.ReceiverID！=null）{
div.append（“
接收方ID:“+item.\u source.ReceiverID+”
”）；
}
div.append（“
”）.appendTo（“#结果列表”）；
那些结束div标记有什么问题吗
？您似乎需要编辑您的问题，以包含调用此JS块的代码，因为在这里，我并不认为它会产生您显示的输出。它会被多次呼叫吗？
是从哪里来的？这帮助最大。非常感谢。