Div dentro Div

[nuovobuio]

Ciao ragazzi, vorrei imparare a creare div dentro altri div. La mia conoscenza mi porta a fare così:

                nBox = document.createElement("div");
		        nBox.id = "BOX" + i;
                nBox.style.backgroundColor="red";
                nBox.innerHTML = "Box " + i;
                document.getElementById("all").appendChild(nBox);
                
                nName = document.createElement("div");
                nName.id = "NAME" + i;
                nName.style.backgroundColor="grey";
                nName.innerHTML = "Name " + i;
                document.getElementById("nBox").appendChild(nName);

similmente a come facevo in as3, creo prima il div principale a cui annido il secondo, ma ovviamente non funziona, e non capisco come fare, mi aiutate a capire?

 

[alessandro1997]

Non esiste il div con ID nBox, esiste solo una variabile nBox. Forse volevi scrivere questo?

nBox = document.createElement("div");
nBox.id = "BOX" + i;
nBox.style.backgroundColor="red";
nBox.innerHTML = "Box " + i;

nName = document.createElement("div");
nName.id = "NAME" + i;
nName.style.backgroundColor="grey";
nName.innerHTML = "Name " + i;

document.getElementById("all").appendChild(nBox);
nBox.appendChild(nName);

 

[nuovobuio]

Ciao Alessandro, ho capito, ti ringrazio per la risposta, ma mi spiegheresti meglio cosa vuoi dire?
Per creare un div, eliminando il superfluo, basta la variabile, il testo, e il div in cui inserirlo in questo modo:

nBox = document.createElement("div");
nBox.innerHTML = "Box " + i;
document.getElementById("all").appendChild(nBox);

perchè dici che esisteva solo la variabile nel codice precedente?
Altra cosa che non capisco è il modo di colorare interamente un div, senza inserire alcun testo, come i movieclip in as3, se volessi semplicemente creare un quadratino rosso? Non inserendo l'innerHTML sparisce tutto.

 

[alessandro1997]

Prima tu scrivevi questo:

document.getElementById("nBox").appendChild(nName);

Ed era sbagliato, perché non esisteva un div con l'attributo id pari a nBox; tu memorizzavi il div nella variabile nBox, e dunque dovevi agire direttamente sulla variabile:

nBox.appendChild(nName);

Per quanto riguarda la seconda domanda, usa uno spazio come innerHTML:

div.style.backgroundColor = 'red';
div.innerHTML = ' ';

 

[nuovobuio]

ti ringrazio alessandro, sei stato gentilissimo.