如何在html页面中动态插入html代码

最新推荐文章于 2024-05-06 20:52:53 发布

_抛锚#

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量1.9k

点赞数 1

分类专栏： web前端文章标签： html javascript jquery

本文链接：https://blog.csdn.net/weixin_44949150/article/details/116072342

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用ajax异步提交请求的方式动态加载数据

include.js

$(function () {
    /* 使用ajax异步提交请求数据，响应数据（回调函数） */
    $.get("header.html",function (data) {
        $("#header").html(data);
    });
    $.get("footer.html",function (data) {
        $("#footer").html(data);
    });
});

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>主页</title>
        <meta charset="UTF-8">
        <!-- 导入外部js文件 -->
        <script src="../js/jquery-3.3.1.min.js"></script>
        <!-- 导入外部js文件 -->
        <script src="include.js"></script>
    </head>
    <body>
        <!-- 引入头部 -->
        <div id="header"></div>
        <div id="main"><h1>我是主体</h1></div>
        <!-- 引入尾部 -->
        <div id="footer"></div>
    </body>
</html>

header.html

<div id="header">
    <h1>我是头部</h1>
</div>

footer.html

<div id="footer">
    <h1>我是尾部</h1>
</div>

运行效果如下：
*在这里插入图片描述*
注意：此种方式需要服务器才能有作用

_抛锚#

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何在html页面中动态插入html代码

使用ajax异步提交请求的方式动态加载数据include.js$(function () { /* 使用ajax异步提交请求数据，响应数据（回调函数） */ $.get("header.html",function (data) { $("#header").html(data); }); $.get("footer.html",function (data) { $("#footer").html(data); });});
复制链接

扫一扫