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);

在jQuery </div>中附加<div>

3 个答案: