Objetos DOM en IE

monorendon · #1 (**permalink**) 25/07/2006, 23:47

Saludos, quisiera que me ayuden con mi problema, el cual es el siguiente:

Tengo un método que me crea nodos, por ejemplo <DIV><TABLE><TR><TD></TD></TR></TABLE></DIV>
y los estoy agregando al body a través de esta sentencia

document.body.appendChild(myDiv);

Claro está que myDiv fue un myDiv = document.createElement("DIV") y etc etc etc... hasta añadir la celda a la fila, y la fila a la tabla y la tabla al div... en firefox si se ve.... pero en....... IE......

NOOOOO!!!!

Cual es el problema??? tengo un explorador de objetos DOM y me muestra que si se agregó el DIV pero no se lo visualiza en la página... y es un div gigante... como para que se note... pero no.... Alguien sabe como solucionar esto?????

caricatos · #2 (**permalink**) 26/07/2006, 04:52

Hola:

Explorer crea elementos DOM igual que cualquier otro navegador estándar... Lo que tal vez tengas mal es no indertar una tag tbody... que se crea automáticamente en una html, pero al crear la estructura con DOM no deberíamos omitirlo...

Pruébalo y nos cuentas.

Saludos

danilat · #3 (**permalink**) 26/07/2006, 05:01

Hola monorendon.

Puedes poner el código, yo tengo código como el tuyo funcionando también con explorer.

Saludos.

tunait · #4 (**permalink**) 26/07/2006, 05:10

Buenas

¿estás creando también la tabla dinámicamente?

monorendon · #5 (**permalink**) 26/07/2006, 06:34

Bueno, por lo del tbody, cuando reviso el examinador Dom si aparece sin que yo lo haya puesto, y el código es el siguiente;

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
    <HEAD>
        <STYLE>

            .back {
                DISPLAY: block;
                BOTTOM: 0px;
                TOP: 0px;
                RIGHT: 0px;
                LEFT: 0px;
                Z-INDEX: 200;
                WIDTH: 100%;
                HEIGHT: 100%;
                BACKGROUND: rgb(255, 255, 255) none repeat scroll 0%;
                POSITION: absolute;
            }
        </STYLE>
        <SCRIPT>
function $(id) {
    return document.getElementById(id);
}

function removeElement(divNum,element) {
  var d = $(element);
  var olddiv = $(divNum);
  d.removeChild(olddiv);
}

function createElement(typ) {
    return (document.createElement(typ));
}

function addElement(node,element) {
    node.appendChild(element);
}

function MiClase() {
    this.d=null;
    this.table=null;
    
    this.doFun = function () {
        var backD = createElement("DIV");
        backD.setAttribute("CLASS","back");
        addElement($('dialog'),backD);
    };
    
    this.show = function (message, title) {
        this.doDialog();
    };
}
            dia = new MiClase();
        </SCRIPT>
    </HEAD>
    <BODY>
        eSTO ES TEXTO...
        <TABLE CELLPADDING="0" CELLSPACING="0">
            <TR>
                <TH>Texto de cabecera???</TH>
            </TR>
            <TR>
                <TD>Y esto es una celda con no se que</TD>
            </TR>
        </TABLE>
        <A HREF="javascript: void(0)">est es un vinculo</A>
        <BR>
        <INPUT
            TYPE="text"
            SIZE="10"
            MAXLENGTH="10">
        <BR>
        <TEXTAREA>stestasfsdafasfasfas</TEXTAREA>
        <BR>
        <SELECT STYLE="visibility:visible">
            <OPTION>
                option
            </OPTION>
        </SELECT>
        <BR>
        <H1>
            Esto es un h1
        </H1>
        <BR>
        <H2>
            Esto es un h2
        </H2>
        <BR>
        <H3>
            Esto es un h3
        </H3>
        <BR>
        <H4>
            Esto es un h4
        </H4>
        <BR>
        <H5>
            Esto es un h5
        </H5>
        <BR>
        <H6>
            Esto es un h6
        </H6>
        <BR>
        Esto es normal
        <BR>
        <P CLASS="copyright">
            Esto es un copy rigth <SMALL CLASS="copyright small">pequeno</SMALL>
        </P>
        <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
            <TR>
                <TD
                    COLSPAN="2"
                    class="buttondialog">
                    <BUTTON>
                        Aceptar
                    </BUTTON>
                    <BUTTON>
                        Cancelar
                    </BUTTON>
                </TD>
            </TR>
            <TR>
                <TD>
                    Y esto es una celda con no se que
                </TD>
                <TD>
                    y esta es la otra celda
                </TD>
            </TR>
    </TABLE>
    <!-- Este es el div donde se va a cargar el otro div -->
    <DIV id="dialog">
    </DIV>
    Mas<br>
    y<BR>
    mas<BR>
    texto<BR>
    y<BR>
    unito<BR>
    mas<BR>
    <BUTTON ONCLICK="javascript: dialogo.show(null,'datos');">Click here</BUTTON>
    <DIV id="otrito"></DIV>
</BODY>
</HTML>

No puse todo el código porque es mucho y además corre todo el JS hasta el fin, pero en IE no se ven los nodos creados.... PORQUE????

caricatos · #6 (**permalink**) 26/07/2006, 08:50

Hola:

Le he echado un vistazo rápido, y he visto un par de cosas qque no comprendo:

BACKGROUND: rgb(255, 255, 255) none repeat scroll 0%;

rgb() supongo que lo reconoce explorer, pero puedes poner white o... #ffffff

none me parece que no es válido (espero que me corrijan si estoy equivocado)... tal vez quiereas usar no-repeat.

Aunque usas setAttribute para el atributo class, existe la forma básica... elemento.className (es estándar)

Bueno, seguiré viendo el código, pero paso el testigo a otros foreros.

Saludos

monorendon · #7 (**permalink**) 26/07/2006, 10:39

Bueno, el problema no son los estilos, porque si armo el div directamente en el body, este se agrega con todas las características que buscaba... Ahora, el asunto es que quiero crear el div y ponerlo en el body... en Mozilla Firefox coje muy bien y se crea todo lo que le pedí pero en IE es un dolor de cabeza, lo peor es que el JS no da error.... pero no me muestra el DIV.....