快捷導(dǎo)航

Python實現(xiàn)批量在HTML文件中插入自定義div元素

更新時間：2026年01月29日 08:20:20 作者：weixin_46244623

在日常開發(fā)或網(wǎng)站維護(hù)中,我們經(jīng)常需要對大量?HTML?文件進(jìn)行統(tǒng)一修改,本文將教你如何使用Python和BeautifulSoup批量在?HTML?文件中插入自定義div元素,并提供兩種常見場景的實現(xiàn)方式,感興趣的小伙伴可以了解下

在日常開發(fā)或網(wǎng)站維護(hù)中，我們經(jīng)常需要對大量 HTML 文件進(jìn)行統(tǒng)一修改，比如添加導(dǎo)航欄、公告條、統(tǒng)計代碼等。手動一個個修改不僅效率低，還容易出錯。本文將教你如何使用 Python + BeautifulSoup 編寫腳本，批量在 HTML 文件中插入自定義 <div> 元素，并提供兩種常見場景的實現(xiàn)方式。

一、準(zhǔn)備工作

1. 安裝依賴庫

確保你已安裝 beautifulsoup4：

pip install beautifulsoup4

注意：本教程使用 html.parser（Python 內(nèi)置解析器），無需額外安裝 lxml 或 html5lib。

2. 目錄結(jié)構(gòu)示例

假設(shè)你的項目結(jié)構(gòu)如下：

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

我們將對 pages/ 文件夾下的所有 .html 文件進(jìn)行處理。

二、場景一：在<body>開頭插入 div

適用于沒有 <header> 標(biāo)簽，或希望統(tǒng)一在 body 最頂部插入內(nèi)容的場景（如全局公告條）。

腳本代碼

from bs4 import BeautifulSoup
import os

def add_div_to_html_files_in_folder(folder_path, class_name, content):
    """
    遍歷指定文件夾下所有 .html 文件，在 <body> 的最開始位置插入一個 div。
    
    參數(shù)：
        folder_path (str): HTML 文件所在文件夾路徑
        class_name (str): 新 div 的 class 類名
        content (str): 新 div 的文本內(nèi)容
    """
    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')

                # 創(chuàng)建新的 div 標(biāo)簽
                new_div = soup.new_tag('div', attrs={'class': class_name})
                new_div.string = content

                # 找到 body 標(biāo)簽，并在開頭插入新 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))

# 配置參數(shù)
folder_path = './pages'          # 替換為你的 HTML 文件夾路徑
class_name = 'my_nav'
content = '歡迎大家訪問'

# 執(zhí)行函數(shù)
add_div_to_html_files_in_folder(folder_path, class_name, content)
print("? 已在所有 HTML 文件的 <body> 開頭插入 div！")

效果示例

原 HTML：

<body>
  <h1>首頁</h1>
  <p>內(nèi)容...</p>
</body>

處理后：

<body>
  <div class="my_nav">歡迎大家訪問</div>
  <h1>首頁</h1>
  <p>內(nèi)容...</p>
</body>

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

適用于有語義化 <header> 標(biāo)簽的現(xiàn)代網(wǎng)頁，希望在 header 之前插入內(nèi)容（如頂部通知欄）。

腳本代碼

from bs4 import BeautifulSoup
import os

def insert_div_before_header_in_html_files(folder_path, class_name, content):
    """
    遍歷 HTML 文件，在 <header> 標(biāo)簽前插入 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')

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

                # 查找 header 標(biāo)簽
                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))

# 配置參數(shù)
folder_path = './pages'
class_name = 'my_nav'
content = '歡迎大家訪問'

# 執(zhí)行
insert_div_before_header_in_html_files(folder_path, class_name, content)
print("? 已在 <header> 前（或 body 開頭）插入 div！")

效果示例

原 HTML：

<body>
  <header>
    <h1>網(wǎng)站標(biāo)題</h1>
  </header>
  <main>...</main>
</body>

處理后：

<body>
  <div class="my_nav">歡迎大家訪問</div>
  <header>
    <h1>網(wǎng)站標(biāo)題</h1>
  </header>
  <main>...</main>
</body>

四、注意事項 & 最佳實踐

1.備份原始文件：腳本會直接覆蓋原文件！建議先復(fù)制一份備份，或在測試目錄運行。

2.編碼問題：使用 encoding='utf-8' 可避免中文亂碼，確保你的 HTML 文件也是 UTF-8 編碼。

3.路徑設(shè)置：folder_path 支持相對路徑（如 './pages'）或絕對路徑（如 '/Users/name/project/html'）。

4.擴(kuò)展性

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

5.錯誤處理（進(jìn)階）：可加入 try-except 捕獲文件讀寫異常，避免腳本中斷。