Question

我有生成内容的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>');

但它会自动生成此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>

如何避免在</div></div>段之前创建<p>？

Answer 1

您只能将整个元素添加到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);

Answer 2

另一种方法是使用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');

如何保护自动添加

2 个答案: