.append 使用 jQuery 进行 .load 编辑的内容答案

【问题标题】：.append something that is .load -ed with jQuery.append 使用 jQuery 进行 .load 编辑的内容
【发布时间】：2011-07-05 11:31:35
【问题描述】：

我有一个类似的网页：

<html>
<head>
   . . .
</head>
<body>
  <div id="wrapper">
    <p>Lots of content here!</p>
  </div>
</body>
</html>

我也有一个像这样的外部文件：

<div id="more-stuff"><p>Even more content!</p></div>

我想要一个这样的网页：

<html>
<head>
   . . .
</head>
<body>
  <div id="wrapper">
    <p>Lots of content here!</p>
    <div id="more-stuff"><p>Even more content!</p></div>
  </div>
</body>
</html>

使用 jQuery。我的猜测是这样的：

$(document).ready(function(){
  $('#wrapper').append.load('/external.htm');
});

但它不起作用，我似乎找不到好的解决方案。

【问题讨论】：

标签： jquery ajax load append

【解决方案1】：

试试这样的：

$(document).ready(function(){
    $.get('/external.htm', function(data) {
        $('#wrapper').append(data);
    });
});

它告诉 jQuery 请求 html 文件，然后在准备好时运行回调（这反过来会附加请求返回的数据）。

【讨论】：

有什么理由说这是比下一个更好的解决方案吗？
确实，我错过了 ); - 固定的。此示例与下一个示例之间的唯一区别是下一个示例将 external.htm 的内容包装在 p 标记中（因此它将是<p><div id="more-stuff"><p>Even more content!</p></div></p>），而这个示例将添加内容没有包装。

【解决方案2】：

.append() 不能这样工作。它需要附加文本。但是.load() 会覆盖其目标的内容，因此您需要先附加一个子项，然后再加载到该子项。

$(document).ready(function(){
    $('#wrapper').append($(document.createElement("p")).load('extern.html'));
});

【讨论】：

您好，感谢您的回复。有用。我现在意识到为什么我的版本不起作用。我很好奇，你知道这个解决方案比以前的解决方案更好的原因吗？
好吧，我不回答是好是坏，而是告诉你我的回答是同步的，而rsp的回答是异步的。异步答案可以让整个页面加载得更快，但也可能导致“FOUC”或“未（完成）内容的闪现”。除非您正在处理网络问题或非常大的文件，否则这可能无关紧要。
实际上你的例子也是异步的。 $('selector').load(url); 几乎是$.get(url, function (data) { $('selector').html(data); }); 的捷径