Python实现批量在HTML文件中插入自定义div元素

更新时间：2026年01月29日 08:20:20 作者：weixin_46244623

在日常开发或网站维护中,我们经常需要对大量 HTML 文件进行统一修改,本文将教你如何使用Python和BeautifulSoup批量在 HTML 文件中插入自定义div元素,并提供两种常见场景的实现方式,感兴趣的小伙伴可以了解下

在日常开发或网站维护中，我们经常需要对大量 HTML 文件进行统一修改，比如添加导航栏、公告条、统计代码等。手动一个个修改不仅效率低，还容易出错。本文将教你如何使用 Python + BeautifulSoup 编写脚本，批量在 HTML 文件中插入自定义 <div> 元素，并提供两种常见场景的实现方式。

一、准备工作

1. 安装依赖库

确保你已安装 beautifulsoup4：

pip install beautifulsoup4

注意：本教程使用 html.parser（Python 内置解析器），无需额外安装 lxml 或 html5lib。

2. 目录结构示例

假设你的项目结构如下：

your_project/
├── pages/
│ ├── index.html
│ ├── about.html
│ └── contact.html
└── add_div_script.py ← 脚本文件

我们将对 pages/ 文件夹下的所有 .html 文件进行处理。

二、场景一：在<body>开头插入 div

适用于没有 <header> 标签，或希望统一在 body 最顶部插入内容的场景（如全局公告条）。

脚本代码

from bs4 import BeautifulSoup
import os

def add_div_to_html_files_in_folder(folder_path, class_name, content):
    """
    遍历指定文件夹下所有 .html 文件，在 <body> 的最开始位置插入一个 div。
    
    参数：
        folder_path (str): HTML 文件所在文件夹路径
        class_name (str): 新 div 的 class 类名
        content (str): 新 div 的文本内容
    """
    for root, _, files in os.walk(folder_path):
        for file in files:
            if file.endswith('.html'):
                html_file = os.path.join(root, file)

                # 读取 HTML 文件
                with open(html_file, 'r', encoding='utf-8') as f:
                    html_content = f.read()

                soup = BeautifulSoup(html_content, 'html.parser')

                # 创建新的 div 标签
                new_div = soup.new_tag('div', attrs={'class': class_name})
                new_div.string = content

                # 找到 body 标签，并在开头插入新 div
                body_tag = soup.body
                if body_tag:
                    body_tag.insert(0, new_div)

                # 写回文件
                with open(html_file, 'w', encoding='utf-8') as f:
                    f.write(str(soup))

# 配置参数
folder_path = './pages'          # 替换为你的 HTML 文件夹路径
class_name = 'my_nav'
content = '欢迎大家访问'

# 执行函数
add_div_to_html_files_in_folder(folder_path, class_name, content)
print("✅ 已在所有 HTML 文件的 <body> 开头插入 div！")

效果示例

原 HTML：

<body>
  <h1>首页</h1>
  <p>内容...</p>
</body>

处理后：

<body>
  <div class="my_nav">欢迎大家访问</div>
  <h1>首页</h1>
  <p>内容...</p>
</body>

三、场景二：在<header>前插入 div

适用于有语义化 <header> 标签的现代网页，希望在 header 之前插入内容（如顶部通知栏）。

脚本代码

from bs4 import BeautifulSoup
import os

def insert_div_before_header_in_html_files(folder_path, class_name, content):
    """
    遍历 HTML 文件，在 <header> 标签前插入 div；
    若无 <header>，则退回到在 <body> 开头插入。
    """
    for root, _, files in os.walk(folder_path):
        for file in files:
            if file.endswith('.html'):
                html_file = os.path.join(root, file)

                with open(html_file, 'r', encoding='utf-8') as f:
                    html_content = f.read()

                soup = BeautifulSoup(html_content, 'html.parser')

                # 创建新 div
                new_div = soup.new_tag('div', attrs={'class': class_name})
                new_div.string = content

                # 查找 header 标签
                header_tag = soup.find('header')
                if header_tag:
                    header_tag.insert_before(new_div)  # 插入到 header 前
                else:
                    # 回退方案：插入到 body 开头
                    body_tag = soup.body
                    if body_tag:
                        body_tag.insert(0, new_div)

                # 保存修改
                with open(html_file, 'w', encoding='utf-8') as f:
                    f.write(str(soup))

# 配置参数
folder_path = './pages'
class_name = 'my_nav'
content = '欢迎大家访问'

# 执行
insert_div_before_header_in_html_files(folder_path, class_name, content)
print("✅ 已在 <header> 前（或 body 开头）插入 div！")

效果示例

原 HTML：

<body>
  <header>
    <h1>网站标题</h1>
  </header>
  <main>...</main>
</body>

处理后：

<body>
  <div class="my_nav">欢迎大家访问</div>
  <header>
    <h1>网站标题</h1>
  </header>
  <main>...</main>
</body>

四、注意事项 & 最佳实践

1.备份原始文件：脚本会直接覆盖原文件！建议先复制一份备份，或在测试目录运行。

2.编码问题：使用 encoding='utf-8' 可避免中文乱码，确保你的 HTML 文件也是 UTF-8 编码。

3.路径设置：folder_path 支持相对路径（如 './pages'）或绝对路径（如 '/Users/name/project/html'）。

4.扩展性

可将 content 改为 HTML 字符串（使用 new_div.append(BeautifulSoup(html_str, 'html.parser'))）
可添加更多属性，如 id、style 等：attrs={'class': 'xxx', 'id': 'yyy', 'style': 'color:red;'}

5.错误处理（进阶）：可加入 try-except 捕获文件读写异常，避免脚本中断。

五、总结

通过这两个脚本，你可以：

快速为整个网站添加统一的顶部提示
批量注入统计代码、客服浮窗、多语言切换按钮等
自动化完成重复性 HTML 修改任务

Python + BeautifulSoup 是前端工程自动化的利器！ 掌握它，让你从繁琐的手动操作中解放出来。

到此这篇关于Python实现批量在HTML文件中插入自定义div元素的文章就介绍到这了,更多相关Python HTML插入自定义div内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Python
HTML

一篇文章带你深入学习Python函数
这篇文章主要带大家深入学习Python函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
pytorch+torchvision+python版本对应及环境安装
本文主要介绍了pytorch+torchvision+python版本对应及环境安装,安装过程中需要注意Numpy版本的降级,以确保与PyTorch兼容,具有一定的参考价值,感兴趣的可以了解一下
2025-03-03
python 制作python包,封装成可用模块教程
这篇文章主要介绍了python 制作python包,封装成可用模块教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
python爬虫之你好,李焕英电影票房数据分析
这篇文章主要介绍了python爬虫之你好,李焕英电影票房数据分析,文中有非常详细的代码示例,对正在学习python爬虫的小伙伴们有一定的帮助,需要的朋友可以参考下
2021-04-04
关于python selenium 运行时弹出窗口问题
最近在做一个网页代填项目，用到了python的selenium知识，经过了各种尝试与搜索最后终算是较完美的解决了，下面小编给大家带来了python selenium 运行时弹出窗口问题，感兴趣的朋友一起看看吧
2021-11-11
python之wxPython菜单使用详解
这篇文章主要介绍了python中wxPython菜单使用方法,可实现给弹出菜单项添加图标的功能,在Python程序设计中非常具有实用价值,需要的朋友可以参考下
2014-09-09
深入浅析NumPy库中的numpy.diag()函数
通过本文的介绍,我们深入了解了NumPy库中numpy.diag()函数的用法和应用,从基本用法到高级特性,再到在线性代数中的应用,我们逐步展示了numpy.diag()在处理对角矩阵和相关问题时的强大功能,需要的朋友可以参考下
2024-05-05
python使用Pyinstaller如何打包整个项目
这篇文章主要介绍了python使用Pyinstaller如何打包整个项目，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-11-11
Python多进程中避免死锁问题的六种策略
死锁是Python多进程开发中最容易踩的坑之一,一旦出现会导致进程卡死、程序无响应,甚至需要强制终止才能恢复,所以本文给大家介绍了Python多进程中避免死锁问题的六种策略,需要的朋友可以参考下
2025-12-12
jupyter闪退怎么办?jupyter闪退问题的解决
这篇文章主要介绍了jupyter闪退怎么办？jupyter闪退问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01