JQuery Append函数自动关闭Div

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

浏览器会关闭无效的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>");

Answer 2

函数.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的方式相同。 :)