Question

I have this function that create a new div with a class name.
Now I want to add a new div inside the created div. But nothing happened. When I look in the console with Chrome, nothing gets rendered inside the new div…

Any ideas?

function diceWrapper(){
    var wrappId=document.createElement("div");
    document.getElementById("page-content-wrapper").appendChild(wrappId);
    document.getElementsByTagName("div")[3].setAttribute("class", "dice-window-wrapper");
}

function menubar(){
    var menuid=document.createElement("div");
    document.getElementById("dice-window-wrapper").appendChild(menuid);
    document.getElementsByTagName("div")[4].setAttribute("class", "dice-menubar-wrapper");
}

And while I’m already asking, the new created <div class="dice-window-wrapper".
Keeps pushing down some other elements that are suposed to be before this div class. Even when the attributes are [0] and [1].

Answer 1

It seems like you’re trying to find the newly created <div> and then modify it. It would be better to make all modifications first and only then add it to the document.

function createElementWithClass(elementName, className)
{
    var el = document.createElement(elementName);

    el.className = className;

    return el;
}

var outerDiv = createElementWithClass('div', 'dice-window-wrapper'),
innerDiv = createElementWithClass('div', 'dice-menubar-wrapper');

outerDiv.appendChild(innerDiv);

document
  .getElementById("page-content-wrapper")
  .appendChild(outerDiv);