getElementById Dove elemento viene creato dinamicamente in fase di esecuzione

Question

Ho creato un oggetto in fase di esecuzione utilizzando il tag innerHTML, ora desidero accedere a questo elemento utilizzando getElementById, quando ho accesso all'elemento il suo valore NULL di ritorno. Gentilmente mi suggeriscono qualsiasi direzione in modo che possa raggiungere questo obiettivo,

Ecco il seguente suggerimento codice che sto usando

In HTML

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

In JS

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

Qui obj restituisce valore null.

Answer 1

Hai assegnato un ID all'elemento appena creato? Hai inserito l'elemento nell'albero del documento (utilizzando appendChild o insertBefore)? Finché l'elemento non è inserito nel DOM, non è possibile recuperarlo utilizzando document.getElementById.

Esempio di creazione dell'elemento:

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

[modifica] Dato il codice fornito dopo, una terza domanda emerge: è il tuo script che si trova nella parte inferiore della vostra pagina html (a destra prima del tag di chiusura </body>)? Se si trova nell'intestazione del documento, è possibile che lo script sia in esecuzione prima dello l'albero dei documenti sia completamente visualizzato. Se lo script deve essere nella testata del documento, è possibile utilizzare un gestore di carico per eseguirlo dopo il rendering del documento:

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

Answer 2

Per aggiungere un elemento utilizzando JavaScript, è necessario fare 2 cose .

1. Creare l'elemento

   var elemento = document.createElement (tagName);

2. Aggiungere al dom

   document.body.insertBefore (selettore, elemento);

o

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

Maggiori informazioni qui: MDN

Answer 3

Se un nodo DOM è stato creato in modo dinamico, allora non c'è bisogno sempre di trovare di nuovo con document.getElementById().

Creando il nodo nel modo giusto, è possibile mantenere un riferimento ad esso come una variabile javascript, che può essere utilizzata ovunque all'interno dell'ambito.

Ad esempio:

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 funzione interna (chiamato ad un certo punto (s) futuro) ha accesso alla variabile myDiv perché la funzione esterna forma una "chiusura", all'interno del quale sono conservati variabili vivo e accessibile, anche se la funzione esterna è stata completata e restituita.