I've created an element in pure CSS via bookmarks. It is created but not visible

Question

My code is as follows:

g = document.createElement('div');
g.setAttribute("id", "divcontainer");

g.innerHTML = `

HTML GOES HERE

`

When I use this on a website I want the div to be centered and visible, it is working because it creates the div (tested in console) but I can't see it.

I'm not using JQuery, but I can if needed. My goal is to have a UI type thing.

Answer 1

Your code only creates the element but does not add it to the DOM, for this you have to use document.body.appendChild(element) and add that element to the body element, you can also use The same method adds inner elements as well as elements selected by id or QuerySelector.

You can modify the code as follows:

g = document.createElement('div');
g.setAttribute("id", "divcontainer");

g.innerHTML = `HTML GOES HERE`;
document.body.appendChild(g);

If you want to add multiple elements, you can use append() instead of appendChild().

document.body.append(g,g2,g3,g4)

Hope it helps!