[Mudando a cor de um elemento que ainda não existe]

Bom galera, sou novo aqui.

Estou com uma duvida tremenda de como eu faço para alterar o background color de um elemento que ainda não foi criado,

pois ele só vai ser criado dps que apertar um botão, sem mais delonga, segue o código. Agradeço se puderem me ajudar.

Obs. eu preciso mudar a cor das div quando o Mouse passar por cima delas.

var boxContainer = document.querySelector('#box');
var btnElement = document.querySelector('button');
var getBox = document.getElementsByClassName('createBox');

btnElement.onclick = function creatingBoxes(){

    var boxCreator = document.createElement('div');

    boxCreator.setAttribute('class', 'createBox');
    boxCreator.style.width = "100px";
    boxCreator.style.height = "100px";
    boxCreator.style.backgroundColor = '#f00';
    boxContainer.insertBefore(boxCreator, btnElement);
}

getBox.onmouseover = function changingColorOfBoxes() {
    
    var newColor = getRandomColor(); 
    getBox.style.backgroundColor = newColor;
    
}

function getRandomColor(){
    var letters = "0123456789ABCDEF";  
    var color = "#";  
    for (var i = 0; i < 6; i++) {   
         color += letters[Math.floor(Math.random() * 16)];  
    } 
    return color; 
}