Thymeleaf th:insert、th:replace、th:include的使用

参考资料

一. 前期准备

⏹子页面 test14-sub.html

DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <style>
        .children {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    style>
head>
<body>
    <div class="children">
        <div th:id="${id}">[[${name}]]div>
        <h1>我是子页面中的内容h1>
        <hr>

        <div th:fragment="footer">
            我是子页面中footer片段的内容
        div>
    div>
body>
<script>
    window.addEventListener("load", () => {
        console.log("子页面的内容加载了！");
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

⏹父页面

DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <style>
        .parent {
            width: 500px;
            height: 100px;
            background-color: yellow;
        }
    style>
    <title>testtitle>
head>
<body>
    <div class="parent">
        我是父页面中的内容
    div>
    <hr>

    <div class="parent-area">
        
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

二. th:insert

引入子模块的所有，保留自己的主标签
当引入子页面的片段的时候，会保留 th:fragment片段的主标签

:: html表示引入整个子页面，包括子页面中的js和css

<div id="import-content" th:insert="./test14-sub :: html(id='110', name='贾飞天')">div>
1

🤔效果

在这里插入图片描述

引入片段

<div id="import-content" th:insert="./test14-sub :: footer">div>
1

🤔效果
可以看到th:fragment片段的主标签div依旧存在

在这里插入图片描述

三. th:include

🤪 Thymeleaf 3.0之后不推荐使用

引入子模块的所有，保留自己的主标签
当引入子页面的片段的时候，不会保留 th:fragment片段的主标签

引入整个html

<div id="import-content" th:include="./test14-sub :: html(id='110', name='贾飞天')">div>
1

🤔效果

在这里插入图片描述

引入片段

<div id="import-content" th:include="./test14-sub :: footer">div>
1

🤔效果
可以看到th:fragment片段的主标签已经不存在了，这一点是 th:include 和 th:insert 最大的区别

在这里插入图片描述

四. th:replace

引入子模块的所有，不保留父模块的tag。
替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div等元素标签

引入整个html

<div id="import-content" th:replace="./test14-sub :: html(id='110', name='贾飞天')">div>
1

🤔效果

在这里插入图片描述

引入片段

<div id="import-content" th:replace="./test14-sub :: footer">div>
1

🤔效果

在这里插入图片描述

相关阅读:
dubbo和webservice 区别
Linux部署项目
【网页前端】CSS之拓展样式以及Emmet语法
OX08B40sensor的规格书
mac安装allure及allure:command not fund问题解决
钡铼EdgeIO边缘计算 I/O 控制器
《道德经》与“低熵”思想炫酷实现（.html)
Crossentropy loss与Hinge loss
Docker 使用 IDEA 内置插件构建上传镜像与 SSH、FTP 功能使用
Dockerfile 简介

原文地址：https://blog.csdn.net/feyehong/article/details/127953997

Thymeleaf th:insert、th:replace、th:include的使用

目录

一. 前期准备

二. th:insert

三. th:include

四. th:replace