jquery将html内容(datestamp)加载到div不是我想要的地方

Question

我有一个名为lastrun.html的单独文件，它只包含一个日期戳。我想让它在我的index.html中显示在正确的位置。

我正在使用

 $(document).ready(function() {
                    $("#lastrun").load("lastrun.html");
 });

然后在我的html主体部分，我有：

<p>Last run on <div id="lastrun" style="display:inline"></div></p>

我们的期望是：

最后一次运行是在2017年6月5日，但它确实是：

最后一次运行

2017年6月5日

如何在最后一次运行行上显示日期？

Answer 1

将div更改为span

<p>Last run on <span id="lastrun" ></span></p>

要更好地解释div和span之间的差异，请查看this answer here

Answer 2

p内部不允许使用div。这会导致p关闭，然后是div，然后是另一个空p。

因此，您的html，甚至在ajax调用之前，都是由浏览器呈现的，如下所示

<p>Last run on </p>
<div id="lastrun" style="display:inline"></div>
<p></p>

因此，您需要在p中使用允许的元素，如span，或者对外部元素使用div而不是p。

<p>Last run on <span id="lastrun" style="display:inline"></span></p>

或

<div>Last run on <div id="lastrun" style="display:inline"></div></div>

Answer 3

我已经创建了一个用于加载内容的jsfiddle with 2 techniques。

$("#lastrun").load('lastrun.html'); 

上面的示例与您的示例完全相同。div标记不应该影响这一点，但是您可以使用更传统的ajax请求进行调试：

$.get('lastrun.html', function(aResponse) {
  $("#lastrun").html(aResponse);
}).fail(function(jqXHR, textStatus, errorThrown) {
  console.error(arguments);
  $("#lastrun").html(errorThrown);
});

这将帮助您确定请求url本身是否存在问题。