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实现Selenium自动化Page模式
这篇文章主要介绍了Python实现Selenium自动化Page模式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
numpy 计算两个数组重复程度的方法
今天小编就为大家分享一篇numpy 计算两个数组重复程度的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-11-11
详解Python编程中包的概念与管理
这篇文章主要介绍了Python编程中包的概念与管理,包括包管理工具pip的基本安装使用,需要的朋友可以参考下
2015-10-10
python实现员工管理系统
这篇文章主要介绍了python实现员工管理系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
今天小编就为大家分享一篇对DataFrame数据中的重复行,利用groupby累加合并的方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-01-01
python re的findall和finditer的区别详解
这篇文章主要介绍了python re的findall和finditer的区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
一文带你掌握Python多线程同步的核心机制与最佳实践
Python 的 threading 模块提供了多种同步原语,每种都有其特定的适用场景,本文将详细介绍这些核心机制、使用方法和最佳实践,感兴趣的小伙伴可以了解下
2026-01-01
python模糊字符串匹配库fuzzywuzzy用法及说明
fuzzywuzzy库是一个强大的模糊字符串匹配工具,基于Levenshtein距离算法,它提供了字符串相似度比较、模糊匹配与排序等功能,广泛应用于数据清洗、文本匹配和搜索引擎优化等场景中
2025-11-11
pytorch 自定义卷积核进行卷积操作方式
今天小编就为大家分享一篇pytorch 自定义卷积核进行卷积操作方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-12-12
python爬虫实战之制作属于自己的一个IP代理模块
Python爬虫常常会面临自己ip地址被封的情况,也许不懂的读者就只能等ip解封之后再进行接下来的操作了,为什么自己不做一个Python模块专门用于处理这种情况呢？文中对于读者开发Python爬虫肯定有一定的帮助,希望读者耐心看下去,需要的朋友可以参考下
2021-06-06