jQueryの追加機能は自動的に閉じ本部

Question

私はdiv要素にいくつかのHTMLを追加するために、このコードを使用します。

$("#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は、ブラウザによって完成されています。だからあなたは完全なコードを与えることを確認する必要があります。

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()に適用されます。文字列としてHTMLをプリコンパイルしてから、このような.append()を使用することをお勧めします。また、これらの関数は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>");