Javascript Electron:无法从子窗口中找到DOM元素

我试图将一个参数及其属性从主进程发送到渲染器进程，然后将该属性值作为字符串附加到html/子窗口中的div中。但是，渲染器进程找不到我指定的Id并返回错误：

无法读取EventEmitter上null的属性“append”。

我想我可以通过将渲染器文件源化到我的html中来绕过这个错误，但这会使html查找也源化到该渲染器进程中的其他元素，因为我有多个html文件连接到它，并且这两种方式都不起作用

因此，在此之后，我专门为该html窗口创建了另一个javascript文件，但该窗口无法接收来自主进程的事件

这是我目前的代码：

HTML

渲染器

//Burst create window
let brstwindow = new BrowserWindow({
  width:400,
  height:415,
  frame: false,
  useContentSize: true,
  backgroundColor: '#00000000',
  alwaysOnTop: false,
  transparent: true,
  resizable: true,
  webPreferences: {
    nodeIntegration: true,
    enableRemoteModule: true,
    useContentSize:true
  }
 });

 brstwindow.loadURL(url.format({
  pathname: path.join(__dirname, 'Burstcreate.html'),
  protocol: 'file',
  slashes:true
  
})); 
brstwindow.webContents.openDevTools()
brstwindow.hide()

//Open the burst button window
let brstopen = document.getElementById('burstbtn')
brstopen.addEventListener('click', function(event){
brstwindow.show()
})

//Recieve file path from main and append to div
ipcRenderer.on('brstfiles', function(event){
  console.log('html recieved')
  document.getElementById('brst_files').append('data.filePath')//I know this just appends a string
  console.log('file path recieved')
})

其他渲染器

const { ipcRenderer, webContents} = require('electron');
const app = require('electron').remote.app;
const electron = require('electron');
const { get } = require('http');
const BrowserWindow = electron.remote.BrowserWindow;
const path = require('path');
const { on } = require('process');
const {dialog} = require('electron')
const url = require('url');

//Recieved the file path back from main and appending it to div
ipcRenderer.on('brstfiles', function(event){
    console.log('html recieved')
    document.getElementById('brst_files').append('data.filePath')
    console.log('file path recieved')
  })

所以我的主要问题是：如何从渲染器中找到子窗口中的DOM元素？我应该从主流程开始做所有事情吗

额外问题：如何在渲染器进程中从主进程接收参数

//Burst create window
let brstwindow = new BrowserWindow({
  width:400,
  height:415,
  frame: false,
  useContentSize: true,
  backgroundColor: '#00000000',
  alwaysOnTop: false,
  transparent: true,
  resizable: true,
  webPreferences: {
    nodeIntegration: true,
    enableRemoteModule: true,
    useContentSize:true
  }
 });

 brstwindow.loadURL(url.format({
  pathname: path.join(__dirname, 'Burstcreate.html'),
  protocol: 'file',
  slashes:true
  
})); 
brstwindow.webContents.openDevTools()
brstwindow.hide()

//Open the burst button window
let brstopen = document.getElementById('burstbtn')
brstopen.addEventListener('click', function(event){
brstwindow.show()
})

//Recieve file path from main and append to div
ipcRenderer.on('brstfiles', function(event){
  console.log('html recieved')
  document.getElementById('brst_files').append('data.filePath')//I know this just appends a string
  console.log('file path recieved')
})

const { ipcRenderer, webContents} = require('electron');
const app = require('electron').remote.app;
const electron = require('electron');
const { get } = require('http');
const BrowserWindow = electron.remote.BrowserWindow;
const path = require('path');
const { on } = require('process');
const {dialog} = require('electron')
const url = require('url');

//Recieved the file path back from main and appending it to div
ipcRenderer.on('brstfiles', function(event){
    console.log('html recieved')
    document.getElementById('brst_files').append('data.filePath')
    console.log('file path recieved')
  })