Add Elements with Javascript

Question

I’m getting the bug:

Uncaught Domexception: Failed to execute 'insertBefore' on 'Node': The Node before which the new Node is to be inserted is not a Child of this Node.

When I try to insert one div after another using Javascript.

function verificaHierarquia(e) {
    var valor = $(e).val(),
        valor2 = $(e).children(':selected').data("valor2");

    if (valor2 == 1) {
        var divSupervisor = document.createElement("div");
        divSupervisor.id = "divSupervisor";
        divSupervisor.className = "col-lg-6 mb-3";

        var divAtual = document.getElementById("divSenha");
        divAtual.insertBefore(divSupervisor, divSenha);

        document.getElementById("divSupervisor").innerHTML =
            '<label for="sup">Sup</label>\n'+
            '<input type="text" name="sup" class="form-control">';
    }
}

Answer 1

The second parameter of the method Node.insertBefore is a reference node for JS to know which part of the element parent will be inserted.

By the exception received, it seems to me divSenha is not the son of divAtual, thus the JS does not know where to insert the new node.