Question

I am having trouble with my code. I am creating new divs then inserting them before every element with the class of time and time2. Unfortunately my code does not working I get insertBefore is undefined error. I suspect its my for loop but I need further help.

window.onload = function () {
    var badges, timeOne, timeTwo, parentDiv;

    timeOne = document.getElementsByClassName("time");
    timeTwo = document.getElementsByClassName("time2");

    for (index = 0; index < timeOne.length; ++index) {
        badges = document.createElement("div");
        badges.id = "badges";
        parentDiv = timeOne.parentNode;
        parentDiv.insertBefore(badges, timeOne[index]);
    }

    for (index = 0; index < timeTwo.length; ++index) {
        badges = document.createElement("div");
        badges.id = "badges";
        parentDiv = timeTwo.parentNode;
        parentDiv.insertBefore(badges, timeTwo[index]);
    }
}

Answer 1

timeOne isn’t an element but an array so it doesn’t have a parentNode.

You probably want to use

parentDiv = timeOne[index].parentNode;
parentDiv.insertBefore(badges, timeOne[index]); 

To avoid those errors, I suggest you give more meaningful names to your variables. For example

var timeOneElements = document.getElementsByClassName("time");