getElementById con un id que no esta en el dom inicial

Volrath · #1 (**permalink**) 26/07/2007, 16:39

Hola, antes que nada quiero pedir disculpas porque este post esta tambien copiado en la seccion de ajax, y se que no deberia tener dos posts iguales. Pero, despues de haberle dado vueltas al problema varias veces, creo que me he equivocado y creo que debi haberlo posteado aqui en javascript antes que en ajax, pues ahora el problema me parece ke es concerniente al javascript mas que todo:

(ojo, soy nuevo con js, se que puedo estar cometiendo barbaridades con lo que digo, porque no estoy muy seguro de lo que voy a escribir ni como plantear mi problema, espero que me entiendan)

Tengo problemas al cargar contenido asincronamente con ajax, porque tengo una funcion que (dentro de un window.addEvent('domready')) utiliza algunos elementos de mi codigo html usando document.getElementById, pero, luego de cargar algunos datos con ajax en la pagina, tambien necesito acceder a ellos (a los nodos recien cargados) con getElementById, pero no puedo porque todo esto esta dentro de el window.addEvent('domready') y me imagino que eso quiere decir que los nodos a los que puedo acceder forman parte del dom inicial con el que se cargo la pagina inicialmente, pero luego de actualizarla asincronamente, el dom no cambia (CREO), y entonces, para mi codigo javascript, los nodos que cargo con ajax son invisibles (pues no estan en el arbol de elementos del documento) y no los puedo alcanzar con getElementById.

Alguien sabe como puedo solucionar esto? espero no haber sido muy confuso :S yo no estoy muy claro en lo que estoy diciendo porque de verdad no conozco mucho.
Espero que me puedan ayudar, gracias!
(sin acentos)

el_javi · #2 (**permalink**) 26/07/2007, 17:11

Hola Volrath

Creo que más o menos entiendo tu idea y tu planteamiento.

Yo (no con ajax) inserto (creo --> del verbo crear) con Javascript nodos dinámicamente, los incluyo dentro de mi HTML y desde otras funciones, botones... puedo acceder a ellos sin problema.

El DOM inicial no se modifica,pero en la memoria del Navegador y en la Memoria del DOM, esos elemento existen, a pesar de haberlos cargado dinámicamente.

"Como muestra, un botón"

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <script language="JavaScript1.2" type="text/javascript">
        function insertarNuevoNodo ()
        {
            // Creo un elemento dinámicamente, por lo que no está en el DOM inicial de este documento
            var nuevoNodo = document.createElement("div");
            // Asigno propiedades a mi nuevo objeto
            nuevoNodo.id = "nodo_de_Volrath";
            nuevoNodo.style.width = "400px";
            nuevoNodo.style.height = "200px";
            nuevoNodo.style.backgroundColor = "#CCCCCC";
            nuevoNodo.innerHTML = "Este ejemplo es para ti <strong>Volrath</strong>"
            
            // Incluyo el elemento en la página
            document.body.appendChild(nuevoNodo);
            
            // Activo el segundo botón
            document.getElementsByTagName("input")[1].disabled = false;
        }
        
        function leerNuevoNodo()
        {
            // Obtengo el elemento dinámico que se creó antes
            var nuevoNodo = document.getElementById("nodo_de_Volrath");
            
            // Vemos su contenido
            alert (nuevoNodo.innerHTML);
        }
    </script>
</head>

<body>
<input type="Button" value="pinchame y a ver que sale" onclick="insertarNuevoNodo()">

<input type="Button" value="Leemos el elemnto dinámicamente" onclick="leerNuevoNodo()" disabled>


</body>
</html>

Espero serte de ayuda.

Volrath · #3 (**permalink**) 26/07/2007, 23:34

Hola!, perfecto, eso era lo que buscaba, me entendiste bien. pero ahora surge un nuevo problema :S lo que estoy pidiendo por ajax (que es lo mismo que quiero agregar al dom para poder acceder a los nodos por los metodos ya nombrados) es bastante extenso, es mucha informacion generada dinamicamente en la parte logica de la web. Entonces no se si tenga que ponerme a maquetarlo todo desde javascript, div a div, p a p, tag a tag. porque me parece que estaria haciendo el doble del trabajo.

En fin, mi peticion con ajax devuelve un responsetext que seria algo asi:

Código:

<div>
  <div>
    <p>texto</p>
    <p>texto<br />
          mas <a href="#">texto</a></p>
    ...
  </div>
  <hr />
  <div>...</div>
<div>

(eso fue solo un ejemplo, lo que yo genero es mas largo)

y mi pregunta es: no hay alguna forma de a;adir todos estos nodos, basandome en el responseText que obtengo de la peticion con ajax?, porque maquetarlo seria en extremo largo. ademas de que, como los textos son generados dinamicamente, no siempre viene la misma estructura, y no sabria como identificar la maquetacion.

Gracias por la ayuda!