How to dynamically change the content of a div in Electron?

Question

I'm playing around with Electron for the first time and I can't seem to refresh the content of a div upon clicking on a button. The button click contacts a backend and returns a result which I want to show in the said div (which at the beginning is empty).

I tried to check the win object to see if there were methods like document.getElementById('...') but I couldn't seem to find those.

Does anybody know how to update dynamically the content of an HTML element within an Electron application?

Possible duplicate of [How to access DOM elements in electron?](https://stackoverflow.com/questions/32780726/how-to-access-dom-elements-in-electron), [see this detailed answer](https://stackoverflow.com/a/32781187/9325419) — jo_va, Feb 18 '19 at 12:54

nick zoum · Accepted Answer · 2019-02-18T13:08:33.527

The dom can only be manipulated from the renderer thread. You need to send a request to the renderer thread from main to do what you are asking.

You could also create an abstract HTML request listener like:

var actions = {
  hide: function(elem) {
    elem.style.display = "none";
  },
  show: function(elem) {
    elem.style.display = null;
  }
};

function customQuery(query, action) {
  for (var element of document.querySelectorAll(query)) {
    if (typeof element[action] === "function") element[action]();
    else actions[action](element);
  }
}

ipcRenderer.on("customQuery", function (event, ...args) {
  customQuery(...args);
});

Which can be accessed by doing win.webContents.send("customQuery", "#myElement", "hide");

How to dynamically change the content of a div in Electron?

1 Answers1