JQuery的附加功能自動關閉股利

Question

我使用此代碼一些HTML附加到一個div：

$("#conversazione").append("<div class=\"col-md-6\"></div>"); 
$("#conversazione").append("<div class=\"col-md-6\">"); 
$("#conversazione").append("<div class=\"col-md-6\" style=\"text-align:right;\">"); 
$("#conversazione").append("<img src=\"../img/Conversazione/viso.png\" style=\"margin-top:20px;\"/></div>"); 
$("#conversazione").append("<div class=\"col-md-6\" style=\"text-align:left;\">"); 
$("#conversazione").append("<div class=\"bubbleUser\">"+message+"</div>"); 
$("#conversazione").append("</div></div>"); 

但是，當我看到所有頁面自動關閉。結果是這個圖像

我如何得到我需要的結果？

感謝所有

Answer 1

功能.append()直接入射到HTMLDom，因此任何未關閉DOMString由瀏覽器完成。所以你需要確保你提供完整的代碼。這是更好地預編譯HTML作爲一個字符串，然後使用.append()這樣的：

var finalHTML = "<div class=\"col-md-6\"></div>"; 
finalHTML += "<div class=\"col-md-6\">"; 
finalHTML += "<div class=\"col-md-6\" style=\"text-align:right;\">"; 
finalHTML += "<img src=\"../img/Conversazione/viso.png\" style=\"margin-top:20px;\"/></div>"; 
finalHTML += "<div class=\"col-md-6\" style=\"text-align:left;\">"; 
finalHTML += "<div class=\"bubbleUser\">"+message+"</div>"; 
finalHTML += "</div></div>"; 
$("#conversazione").append(finalHTML); 

這適用於.append()，.prepend()，.html()。而且，這些功能在DOM操作中非常重要。將DOM操縱保持在性能方面的最低水平。

這與瀏覽器如何將無效HTML轉換爲有效HTML相同。 :)

Answer 2

瀏覽器關閉無效的HTML。

嘗試以下操作：

$("#conversazione").append("<div class=\"col-md-6\"></div><div class=\"col-md-6\"><div class=\"col-md-6\" style=\"text-align:right;\"><img src=\"../img/Conversazione/viso.png\" style=\"margin-top:20px;\"/></div><div class=\"col-md-6\" style=\"text-align:left;\"><div class=\"bubbleUser\">"+message+"</div></div></div>");