如何从外部 HTML 文件加载/替换整个 DIV？答案

【问题标题】：How to load/replace an entire DIV from an external HTML file?如何从外部 HTML 文件加载/替换整个 DIV？
【发布时间】：2011-03-26 20:13:48
【问题描述】：

我有以下 index.html 页面设置：

<html>
  <head>
  </head>
  <body>
    <div id="container">
      <div id="header">
      </div>
      <div id="sidebar_menu">
      </div>
      <div id="thecontent">
        <div id="page_banner">
        </div>
        <div id="page_content">
        </div>
        <div id="page_footer">
        </div>
      </div>
    </div>
  </body>
</html>

除此之外，我还有几个单独的 .html 文件反映了我的侧边栏菜单中的一个选项，因此当用户第一次登陆页面时，他们将看到基于上述设置的 index.html 文件，即。显示页眉/菜单/内容和页脚。

我的问题是，当用户点击“关于我们”菜单选项时，我实际上只想用 about-us.html 文件的内容替换“thecontent” div，但不重新加载标题和侧边栏菜单.我只想将整个 div “thecontent” 替换为 about-us.html 文件中的 div “thecontent”。

这可能像我说的那样吗，我有几个单独的 .html 文件，并且真的不想在每个页面中复制像我的侧边栏菜单这样的代码，因为只有我的内容会根据菜单选择而改变。

我从this tutorial查看了jQuery.load()。

我认为虽然这行不通。还看到了 .replacewith() 但不确定这是否正确，如果正确，不确定如何在我的场景中使用来关闭并将 div 替换为外部 .html 文件。

【问题讨论】：

标签： jquery jquery-plugins jquery-selectors

【解决方案1】：

jQuery 的 load 方法有一个特殊的语法，允许你从你提供的 URL 中选择你想要加载的内容。您只需在 URL 后指定一个 CSS 选择器。（阅读the documentation，在“加载页面片段”下）

例如：

$("#thecontent").load("about-us.html #thecontent");

托管演示：

http://jsbin.com/uvera3（可通过http://jsbin.com/uvera3/edit编辑）

【讨论】：

如果你这样做，你有类似 html>body>thecontent>thecontent 之类的东西，我们希望只有 html>body>thecontent
@BenZen，您可以通过使用$("#thecontent").load("about-us.html #thecontent>*"); 来避免#thecontent 的嵌套，这将只提取#thecontent 的子元素并将它们注入现有的#thecontent 元素中。

【解决方案2】：

说明：从服务器加载数据，并将返回的 HTML 放入匹配的元素中。

这直接来自 .load() 的 jQuery 文档，它将完全满足您的要求。

$('#thecontent').load('/whereever/about-us.html');

全部完成，谢谢！

.load()

【讨论】：

嗨，实际上确实使用了 .load() 调用，但这实际上用我的 about-us.html 文件的完整内容替换了我的整个 index.html，包括侧边栏菜单，我的 about- us.html 文件没有提及 - 任何想法？
@tonsils 我遇到了同样的问题 - 尝试在我的 index.html 中加载导航栏完全清除了我的 index.html 中的所有其他内容 - 你有没有弄清楚是什么原因造成的？

【解决方案3】：

你试过加载吗？这正是你想要的：

$('#thecontent`').load('about-us.html');

绑定到一个链接：

$(function() {
    $("#aboutuslink").click(function(){
          $('#thecontent`').load('about-us.html');
         return false;
    }) ;
});
<a href="#" id="aboutuslink">About Us</a>

在http://api.jquery.com/load/ 向下滚动到关于加载页面片段的部分。

【讨论】：

嗨，李。试过了，但正如我在下面对 jAndy 提到的，替换了我的整个 index.html 文件 + 侧边栏菜单，这不是我想要的？

【解决方案4】：

如果服务器包含要替换的图层的 HTML，您可以执行以下操作：

$.get('/server-side.html', function(data)
{
    $('#content').html($(data).html());
});

假设 /server-side.html 返回如下内容：

<div id="content">
    YOUR CONTENT HERE
</div>

希望对您有所帮助。问候。

【讨论】：