在前端开发中，有时候需要将保存在本地的 HTML 文件内容加载到网页中。这时候，我们可以使用 jQuery 从文件系统读取 HTML 文件，并将其渲染到指定的 DIV 元素中。这篇文章将介绍如何通过 jQuery 实现这一功能。
前提条件
首先，需要确保你已经引入了 jQuery 库。如果没有，请在 HTML 的 head 标签内添加以下代码：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
加载 HTML 文件
以下是一个简单的 jQuery 函数，用于加载 HTML 文件并将其内容渲染到指定的 DIV 元素中：
-- -------------------- ---- -------
-------- ---------------------- ---------- -
--------
---- ---------
--------- -------
-------- -------- ------ -
------------------------
--
------ -------- -- -
------------------ ------- ---- --------
-
---
-该函数接受两个参数，分别为要加载的 HTML 文件路径和目标 DIV 元素的 ID。其中，$.ajax() 方法用于异步加载 HTML 文件，dataType 参数设置为 text 表示返回纯文本格式的数据。
成功加载 HTML 文件后，success 回调函数会将文件内容赋值给目标 DIV 元素的 innerHTML 属性，从而实现内容渲染。如果加载失败，则会在控制台输出错误信息。
示例代码
以下是一个示例 HTML 文件，名为 test.html，保存在本地：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- ------------ ------- ------ ---------- ----------- ------- -- - ---- --------- ------- -------
接下来，在另一个 HTML 文件中，我们可以使用以下代码将 test.html 文件的内容加载到指定的 DIV 元素中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ---- ---- -------- -- -----------
------- -----------------------------------------------------------
--------
---------------------------- -
------------------------- -----------
---
-------- ---------------------- ---------- -
--------
---- ---------
--------- -------
-------- -------- ------ -
------------------------
--
------ -------- -- -
------------------ ------- ---- --------
-
---
-
---------
-------
------
---- ------------------
-------
-------在上面的代码中，我们引入了 jQuery 库，并定义了 loadHtmlFile() 函数。然后，在文档加载完成后，调用该函数，将 test.html 文件内容加载到 ID 为 target 的 DIV 元素中。
运行以上代码，打开网页，即可看到 test.html 文件的内容已经成功地加载到了 DIV 元素中。
结语
通过本文所介绍的方法，我们可以使用 jQuery 轻松地将本地 HTML 文件内容加载到网页中，而无需使用 iframes。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26743