Jak chronić się przed automatycznym dodawaniem </div> - javascript, jquery, html

Mam kod JavaScript, który generuje treść:

$("#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>");

Ale automatycznie generuje ten 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>

Jak tego uniknąć </div></div> przed <p> segmenty?

Odpowiedzi:

Możesz dodawać do DOM tylko całe elementy, a nie otwierający lub zamykający tag na raz. Najpierw musisz zbudować HTML w ciągu, a następnie dołączyć go. Spróbuj tego:

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);

Innym sposobem jest utworzenie pełnego div za pomocą jQuery, a następnie dołączenie go do #results-list element

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");