Covering a list of elements with a newly created div

[Benos]

I am a newcomer in Javascript. I have the following 2 chunks of code:

let cover = document.createElement("div");
cover.style.position = "absolute";
cover.style.zIndex = "9999";
    
document.querySelectorAll("#pagelet_pymk_timeline, #contentArea, .noGrip, ._5nb8, .ego_column").forEach(function(element) {
element = XYZ
});

My aim is that each of the elements I targeted with querySelectorAll, will be covered with the newly created div.

What could I replace XYZ with, so that the new div I created will cover each of the targeted elements in full width and height?

[Andres_Vaquero]

document.querySelectorAll("#pagelet_pymk_timeline, #contentArea, .noGrip, ._5nb8, .ego_column").forEach(function(element) {
	var cover = document.createElement("div");
	cover.style.position = "absolute";
	cover.style.zIndex = 9999;
	cover.style.backgroundColor = "white";
	cover.style.top = 0;
	cover.style.bottom = 0;
	cover.style.left = 0;
	cover.style.right = 0;
	element.parentNode.appendChild(cover);
});

[Benos]

Hi, thank you. I encounter a problem - It covers almost all of my viewport with a blank slate. I thought of using Element.getBoundingClientRect() to catch the natural sizes of each of the elements, but for now I can only do some tries to get this done.

[Andres_Vaquero]

Try setting relative positions on the containers, although that might break the layout too but its worth a try

[Benos]

If I change it to relative it seems the script no longer works…

[Andres_Vaquero]

Sorry maybe just try this. See i just removed parentNode

document.querySelectorAll("#pagelet_pymk_timeline, #contentArea, .noGrip, ._5nb8, .ego_column").forEach(function(element) {
	var cover = document.createElement("div");
	cover.style.position = "absolute";
	cover.style.zIndex = 9999;
	cover.style.backgroundColor = "white";
	cover.style.top = 0;
	cover.style.bottom = 0;
	cover.style.left = 0;
	cover.style.right = 0;
	element.appendChild(cover);
});

[Benos]

If it is absolute, again, a blank slate covers all page. If it is relative, again, the script sadly seems not to work…