electron动态添加dom并调用electron方法

Electron 是一个基于 Chromium 和 Node.js 的桌面应用程序开发框架，可以用 HTML、CSS 和 JavaScript 来创建跨平台的桌面应用程序。在 Electron 中，我们可以通过动态添加 DOM 元素来实现各种功能，同时也可以通过与主进程通信来调用 Electron 的方法。下面是一个简单的示例代码：

// 在渲染进程中动态添加一个按钮
const button = document.createElement('button');
button.innerText = '点击我';
button.addEventListener('click', () => {
  // 与主进程通信并调用方法
  const { ipcRenderer } = require('electron');
  ipcRenderer.send('open-file-dialog');
});

document.body.appendChild(button);

在上述代码中，我们首先创建了一个按钮元素，并添加了点击事件。当点击按钮时，通过 `require` 方法引入了 Electron 的 `ipcRenderer` 模块，并调用了它的 `send` 方法来向主进程发送消息，并触发了 `open-file-dialog` 事件。

在主进程中，我们可以监听该事件，并执行相应的操作：

// 在主进程中监听 open-file-dialog 事件
const { dialog } = require('electron');

ipcMain.on('open-file-dialog', (event) => {
  dialog.showOpenDialog({
    properties: ['openFile']
  }).then(result => {
    event.reply('selected-file', result.filePaths);
  }).catch(err => {
    console.log(err);
  });
});

在上述代码中，我们通过 `ipcMain.on` 方法监听了 `open-file-dialog` 事件，并使用 `dialog.showOpenDialog` 方法打开了一个文件选择对话框，选择完文件后通过 `event.reply` 方法向渲染进程发送了选中的文件路径。