如何使用JavaScript点击按钮将外部HTML文件的div复制保存到其他HTML文件

浏览器端JavaScript出于安全沙箱限制，默认无法直接修改本地磁盘中的现有HTML文件，以下提供两种常用实现方案：

方案1：浏览器端点击按钮生成新HTML文件供用户下载 #

纯前端可实现，点击按钮后读取外部HTML的指定div，拼接生成新的HTML文件触发用户下载。

你提供的两个原始HTML文件代码如下：

<!-- document1.html -->
<html lang="en">
  <head>
    <title>Document 1</title>
  </head>
  <body>
    <div class="container1">
      <p>text 1</p>
    </div>

  </body>
</html>

<!-- 原始document2.html -->
<html lang="en">
  <head>
    <title>Document 2</title>
  </head>
  <body>
    <div class="container2">
      <p>text 2</p>
    </div>
    <button>Click here</button>
  </body>
</html>

修改后的document2.html实现代码：

<html lang="en">
  <head>
    <title>Document 2</title>
  </head>
  <body>
    <div class="container2">
      <p>text 2</p>
    </div>
    <button id="copyBtn">Click here</button>

    <script>
      document.querySelector('#copyBtn').addEventListener('click', async () => {
        try {
          // 读取外部的document1.html内容
          const res = await fetch('./document1.html')
          const htmlText = await res.text()
          // 解析HTML提取container1的内容
          const tempDom = new DOMParser().parseFromString(htmlText, 'text/html')
          const container1Content = tempDom.querySelector('.container1').outerHTML

          // 生成新的HTML内容，可按需调整结构
          const newHtmlContent = `
<html lang="en">
  <head>
    <title>New Document</title>
  </head>
  <body>
    ${container1Content}
    <div class="container2">
      <p>text 2</p>
    </div>
  </body>
</html>
          `
          // 触发文件下载
          const blob = new Blob([newHtmlContent], { type: 'text/html' })
          const url = URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = url
          a.download = 'merged.html'
          a.click()
          URL.revokeObjectURL(url)
        } catch (err) {
          console.error('读取失败，请确保两个文件在同一域下且通过HTTP服务访问', err)
        }
      })
    </script>
  </body>
</html>

注意事项：

• 两个HTML文件需要放在同一个服务目录下，不要直接双击本地打开，建议用编辑器的Live Server插件启动服务访问，避免跨域报错
• 下载的merged.html就是合并了两个div的新文件，可按需调整生成的HTML结构

方案2：Node.js环境直接操作本地HTML文件 #

如果是本地开发场景，需要直接修改现有HTML文件，可以用Node.js脚本实现：

1. 先安装依赖：
   npm install fs-extra cheerio

2. 编写执行脚本：

const fs = require('fs-extra')
const cheerio = require('cheerio')

async function copyDivToAnotherHtml() {
  // 读取document1的内容
  const doc1Html = await fs.readFile('./document1.html', 'utf8')
  const $1 = cheerio.load(doc1Html)
  const container1 = $1('.container1').prop('outerHTML')

  // 读取document2的内容
  const doc2Html = await fs.readFile('./document2.html', 'utf8')
  const $2 = cheerio.load(doc2Html)
  // 将container1插入到document2的body中，可调整插入位置
  $2('body').prepend(container1)

  // 写入修改后的document2，也可写入到新文件
  await fs.writeFile('./document2.html', $2.html())
  console.log('复制完成')
}

copyDivToAnotherHtml()

如果需要点击按钮触发，可以把这个脚本和Electron或者前端接口结合即可。

内容的提问来源于stack exchange，提问作者salah