Manipulate DOM in Electron

Question

What is the best way to manipulate DOM within an electron app?

I made some tutorials from docs using ipc and webcontents with no luck

My app is so simple, I just

Answer 1

You can comminicate between your frond-end and back-end with webContents and IPC. Then, you'll be able to manipulate your codes in front-end with backend's directive.

For Instance (Backend to Frontend);

Your main.js is sending a message to your front-end.

mainwindow.webContents.send('foo', 'do something for me');

Your frond-end will welcome that message here;

const {ipcRenderer} = require('electron');

ipcRenderer.on('foo', (event, data) => {
        alert(data); // prints 'do something for me'
});

For Instance (Frontend to Backend);

Your frond-end;

const {ipcRenderer} = require('electron');

ipcRenderer.send('bar',"I did something for you");

Your back-end;

const {ipcMain} = require('electron');

ipcMain.on('bar', (event, arg) => {
  console.log(arg)  // prints "I did something for you"
  event.sender.send('foo', 'done') // You can also send a message like that
})

UPDATE AFTER UPDATING QUESTION;

I tried your codes on my local, It seems like working.

Could you please try it with insertAdjacentHTML instead of 'innerHTML' to just make sure or just use console.log.

Like this;

document.getElementById('konsole').insertAdjacentHTML('beforeend',message);

Answer 2

"result" is a reference type value. "result" always chenge value when result = funcC() or another; Try this:

$('#msg').text(result.ToString());