Trocar cor da div quando passa o mouse por cima

Front-end JavaScript
#1

Bom dia,

Preciso trocar a cor do quadrado (foi criado como uma div) cada vez que passo o mouse por cima dele. Como posso fazer isso? Tentei fazer usando o código abaixo e não consegui.

Criar quadrado vermelho 
<script>
    var btnElement = document.querySelector('button.botao');

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

    btnElement.onclick = function () {
        // cria um novo elemento div
        var divNova = document.createElement("div");
        divNova.style.width = '100px';
        divNova.style.height = '100px';
        divNova.style.backgroundColor = '#f00';

        // adiciona o novo elemento criado e seu conteúdo ao DOM
        var divAtual = document.querySelector('app');
        document.body.insertBefore(divNova, divAtual);

        return divNova;
    }

    divNova.onmouseover = function () {

        var divNovaCor = document.createElement("div");
        divNovaCor.style.width = '100px';
        divNovaCor.style.height = '100px';
        divNovaCor.style.backgroundColor = newColor;

        var divNova = document.querySelector('app');
        document.body.insertBefore(divNovaCor, divNova);
    }                      
</script>
#2

Seria isso?

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

var btnElement = document.querySelector('button.botao');
btnElement.addEventListener('click', function () {
    // quando clicar no botão, cria um novo elemento div
    var divNova = document.createElement("div");
    divNova.style.width = '100px';
    divNova.style.height = '100px';
    divNova.style.backgroundColor = '#f00';
    // ao passar o mouse sobre a div, muda a cor
    divNova.addEventListener('mouseover', function(event) {
        event.target.style.backgroundColor = getRandomColor();
    });

    // adiciona o novo elemento criado e seu conteúdo ao DOM
    var divAtual = document.querySelector('app');
    document.body.insertBefore(divNova, divAtual);
});

Pelo que entendi, quando você clica no botão, uma nova div é adicionada (e sempre criada com a cor vermelha).

Nesta nova div você coloca o “mouseover”, e neste evento você muda a cor (chame a função getRandomColor aqui dentro, assim ela sempre mudará a cor quando o mouse passar por cima da div).

#3

Substitui o ONCLICK por APENAS ON, E USE O EVENTO HOVER