javascript - 附加一个在 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 会自动为你关闭标签，因此下面的追加将被放置在 intial 之后<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);