getElementById Donde Elemento se crea dinámicamente en tiempo de ejecución

Question

He creado un objeto en tiempo de ejecución mediante el uso de la etiqueta innerHTML, ahora quiero acceder a este elemento utilizando getElementById, cuando accedí al elemento devuelve valor NULL. Amablemente me sugieren cualquier dirección para que pueda lograr esto,

Aquí es la siguiente clave de código de la que estoy usando

En HTML

<div id="web"> 
<object id="test"></object> 
</div> 

En JS

document.getElementById("web").innerHTML="<object id='test2'></object>"; 
. 
. 
var obj = document.getElementById("test2"); 

Aquí obj devolver valor nulo.

Answer 1

¿Le asignó una identificación al elemento recién creado? ¿Insertó el elemento en el árbol de documentos (usando appendChild o insertBefore)? Siempre que el elemento no se inserte en el DOM, no puede recuperarlo usando document.getElementById.

Ejemplo de la creación elemento:

var myDiv = document.createElement('div'); 
myDiv.id = 'myDiv'; 
document.body.appendChild(myDiv); 
document.getElementById('myDiv').innerHTML = 'this should have worked...'; 

[edición] Teniendo en cuenta el código suministrado más tarde, surge una tercera pregunta: ¿Es la secuencia de comandos situada en la parte inferior de la página html (justo antes de la etiqueta de cierre </body>)? Si está en el encabezado del documento, su secuencia de comandos puede estar ejecutándose antes de el árbol de documentos está completamente renderizado. Si el script tiene que estar en la cabecera del documento, se puede usar un controlador de carga para ejecutarlo después prestación del documento:

window.onload = function(){ 
    document.getElementById("web").innerHTML='<object id="test2"></object>'; 
    // [...] 
    var obj = document.getElementById('test2'); 
}; 

Answer 2

Para agregar un elemento utilizando JavaScript, lo que necesita hacer 2 cosas .

1. Crear el elemento

   elemento var = document.createElement (tagName);

2. Añadir al dom

   document.body.insertBefore (selector, elemento);

o

document.getElementByID(selector).appendChild(element); 

Más información aquí: MDN

Answer 3

Si un nodo DOM se crea de forma dinámica, entonces no hay necesidad nunca encontrar de nuevo con document.getElementById().

Al crear el nodo de la manera correcta, puede mantener una referencia a él como una variable de JavaScript, que se puede usar en cualquier lugar dentro del alcance.

Por ejemplo:

window.onload = function(){ 
    var myDiv = document.createElement('div'); 
    document.body.appendChild(myDiv); 

    //and now a function that's called in response to some future event 
    function whatever(){ 
     ... 
     myDiv.style.color = 'red'; 
     ... 
    } 
}; 

Nota: La función interior (llamado en algún momento (s) futuro) tiene acceso a la variable myDiv porque la función exterior forma un "cierre", dentro de la cual se mantienen las variables vivo y accesible, aunque la función externa se haya completado y devuelto.