Div inside new div with appendchild
I have this function that creates a new div with the 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, there is nothing in 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 one is created <div class="dice-window-wrapper"
.
Keeps clicking on some other elements that are supposed to be in front of this div class. Even if the attributes [0]
and [1]
.
source to share
You seem to be trying to find the newly created <div>
one and then change it. Better to make all the changes first and only then add them 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);
source to share