I have a question regarding DOM manipulation, say I insert a grid using this function:
const grid__container = document.querySelector('.grid__container');
function createVertexes() {
for (let i = 0; i < 9; i++) {
const grid = document.createElement("div");
grid.setAttribute('class', "vertex");
grid.setAttribute('id', i+1);
grid__container.appendChild(grid);
}
}
afterwards, I try to grab all the vertexes with the class “vertex” using document.querySelectorAll(“vertex”) it doesnt work:
const vertexes = document.qeurySelectorAll('vertex');
but this works:
const vertexes = grid__container.childNodes;
I see that the difference is that grid__container is pre-defined in my HTML file, but I wrote the querySelectorALL method in a top down approach, so I dont understand why query selector doesnt work, because I created the elements then tried to grab it, anyone knows why?
I only know this is called DOM-manipulation and not know the exact name of this error and am quite new to javascript, please help.