Cambiar propiedades en DOM generado dinámicamente

[niamigosnijuguetes]

Hola.

Cosa rara la que me está pasando esta mañana. Es la primera vez que genero un árbol DOM dinámicamente mediante appendChilds y createElements. Por ejemplo:

Código Javascript:

var checkbox = document.createElement("input");
checkbox.setAttribute("onclick","seleccionaCheck(this)");
document.body.append(checkbox);
 

Hasta aquí todo bien, se crea el checkbox y se marca/desmarca. El problema es que cuando se pincha y se ejecuta la función seleccionaCheck(this), llega un momento en el que tengo que cambiar la visibilidad (ocultar) de una serie de divs (lo más normal del mundo). El Firebug se vuelve loco y deja de funcionar en ese momento y me doy cuenta de que se oculta el primero de los divs pero no el resto. En IE ni siquiera funciona. El código que utilizo es una cosa muy normalita:

Código Javascript:

div.style.visibility = "hidden";
 
// También he probado con este otro:
 
div.setAttribute("visibility","hidden");
 

Y nada. Peta y no funciona. Ya no sé si tiene algo que ver con generar el DOM dinámicamente, porque antes lo tenía hecho a mano y funcionaba perfectamente.

He terminado por ponerlo a mano, pero no me gusta porque hay muchas id's y acabaré equivocándome cada vez que quiera cambiar algo.

Por cierto, no puedo utilizar PHP en este caso.

¿Alguna sugerencia?

Gracias.

[_cronos2]

¿Qué hace exactamente la función seleccionaCheck? De todas formas es mejor que uses directamente onclick y le pongas el handler, en vez de usar setAttribute.
A todo esto, estás creando un input, pero no un checkbox; y es appendChild, no append.
Saludos (:

[IsaBelM]

no es append sino appendChild
en lugar de agregar el atributo click usa onclick. checkbox.onclcik = function() {fnc()}
y finalmente qué hace la función seleccionaCheck??

[niamigosnijuguetes]

A ver, que me han faltado un par de cosas y hay un par de errores. De todas formas no son demasiado importantes. Pongo el código de nuevo y corregido:

Código Javascript:

var checkbox = document.createElement("input");
checkbox.type="checkbox";    
checkbox.setAttribute("onclick","seleccionaCheck(this)");
document.body.appendChild(checkbox);
 

Todo esto, como ya he dicho, funciona correctamente, pero con las prisas me había equivocado. Por otra parte, también genero dinámicamente una serie de DIVs:

Código Javascript:

for (var i=0; i < 3; i++) {
   var div = document.createElement("div");
   div.id = "div_" + i;
   document.body.appendChild(div);
}
 

Por otra parte, la función seleccionaCheck(this) hace, además de otras cosas, algo así:

Código Javascript:

for (var i=0; i < 3; i++) {
        var bloque = document.getElementById('div_' + i);
                bloque.style.visibility = 'hidden'; //Aquí es donde se vuelve loco
    }
 

La línea donde digo que se vuelve loco, en realidad se ejecuta, pero debugando con el Firebug, parece que para ahí. En realidad el código sigue ejecutándose, pero no termina de hacer el loop entero, por lo que no oculta todos los divs, sino sólo el primero. Es algo muy rarito que puede tener que ver con haber generado el código dinámicamente, o eso creo yo.

Gracias por las contestaciones.

[IsaBelM]

no tiene nada que ver con generarlo dinámicamente. el código que muestras debería de funcionar. de cualquier modo algunas correcciones

var checkbox = document.createElement("input");
checkbox.setAttribute("type","checkbox"); // lo añade como atributo
checkbox.onclick = function() {seleccionaCheck(this);}; // no añade el evento como atributo
document.body.appendChild(checkbox);

for (var i=0; i < 3; i++) {
var div = document.createElement("div");
div.setAttribute("id", "div_" + i); // lo añades como atributo
document.body.appendChild(div);
}

[niamigosnijuguetes]

Uhm. Acabo de probar en casa un ejemplo más fácil y me ha funcionado. Tendré que revisar en el trabajo a ver qué es lo que puede estar pasando. No sé si la cabecera del documento está mal, pero la función seleccionaCheck se ejecutaba con normalidad.

Parece que no tiene nada que ver con asignar un evento onclick como atributo o directamente desde Javascript como propones (aunque es menos intrusivo,claro). He intentado ahora hacer el ejemplo añadiendo las id's como atributos y accediendo a ellas con check.id. Ambas formas funcionan, aunque desconozco cuál es mejor. Entiendo que la segunda forma no llama a otra función adicional, así que creo que es mejor ¿Me corrigen si pueden?

Si mañana me tengo que dedicar al tema en el trabajo y descubro el problema, lo escribiré por aquí.

Gracias a todos.

[niamigosnijuguetes]

Bueno, finalmente he visto lo que pasaba. El Firebug me ha despistado porque cuando llega a la sentencia bloque.style.visibility = 'hidden' se para, pero en realidad la ejecución continuaba y había un error en una sentencia posterior. Parece que es un fallo del propio Firebug. Ahora va todo bien.

Gracias a todos por vuestro interés. Creo que esto se podría cerrar como solucionado...

[_cronos2]

Igual me gano algún enemigo
Pero te recomiendo altamente que dejes Firebug y te pases a la consola de Chrome. Aparte de que es built-in, para mí es mucho más intuitiva y con más features, pero si estás acostumbrado a Firebug igual es un poco coñazo
Saludos :D