附加一个 <div> 在jQuery中

Question

当我使用此代码时：

<script type="text/javascript">
$(document).ready(function() {

$.ajax({
type: "GET",
url: "nyhederlang.xml",
dataType: "xml",
success: parseXml,
error: function(){alert("Error: Something went wrong");}
 });
 });

 function parseXml(xml)
 {
 //print the title and the description
 $(xml).find("article").each(function()
 {
 $("#output").append("<div>");
  $("#output").append("<b>" + $(this).find("title").text() + ":</b> <br />");
  $("#output").append($(this).find("paragraphs").text());
   $("#output").append("</div>");
  });
  }
  </script>

我在#output的开头同时得到了div和/ div。

/ div为什么不放在#output的末尾？

看起来是这样的：

<div id="output">
<div></div>
<b>Some title text</b>
.
.
.
.
.

Answer 1

$("#output").append("<div>");

不仅会附加"<div>"而且会附加格式良好的（封闭的）html元素。 那是一个完整的div。

解决方案是先构建完整的HTML，然后附加它：

var html = "<div>";
html += "<b>" + $(this).find("title").text() + ":</b> <br />";
html += $(this).find("paragraphs").text();
html += "</div>";
$("#output").append(html);

您也可以将其内容附加到第一个附加的div上，但是，正如Ian所指出的那样，最小化附加的数量总是更有效的。

Answer 2

您不能附加部分<div>标签。

jQuery会在您追加标签时自动为您关闭标签，因此以下追加将因此放在初始<div> 。 最后添加的</div>将是其后的另一个空div。

您应该做的是构建整个字符串，并将其附加到单个.append()调用中。

$("#output").append("<div>
                   +"<b>" + $(this).find("title").text() + ":</b> <br />"
                   +$(this).find("paragraphs").text()
                   +"</div>");

Answer 3

而不是附加每个元素； 将其添加到字符串中，然后附加该字符串。 例如：

var html = "";
html += "<div>"
html += "<b>" + $(this).find("title").text() + ":</b> <br />";
html += $(this).find("paragraphs").text();
html += "</div>";

$("#output").append(html);