getElementById Gdzie element jest tworzony dynamicznie w środowisku wykonawczym

Question

Utworzono obiekt w środowisku wykonawczym za pomocą znacznika innerHTML, teraz chcę uzyskać dostęp do tego elementu za pomocą metody getElementById, kiedy uzyskałem dostęp do tego elementu zwracając wartość NULL. Uprzejmie zaproponować mi żadnego kierunku, tak że mogę acheive tym

Oto następujące wskazówkę kod, który używam

W HTML

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

W JS

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

Tutaj obj zwróć wartość pustą.

Answer 1

Czy przypisałeś identyfikator świeżo utworzonemu elementowi? Czy wstawiłeś element do drzewa dokumentu (używając appendChild lub insertBefore)? Dopóki element nie zostanie wstawiony do DOM, nie można go odzyskać za pomocą document.getElementById.

Przykład tworzenia elementu:

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

[edit] Biorąc pod uwagę późniejsze Kod dostarczone, trzecia kwestia wyłania: jest skrypt znajdujący się w dolnej części strony html (tuż przed tagiem zamykającym </body>)? Jeśli znajduje się w nagłówku dokumentu, skrypt może być uruchomiony przed całkowitym wyrenderowaniem drzewa dokumentu. Jeśli skrypt musi znajdować się w nagłówku dokumentu, można użyć funkcji obsługi obciążenia go uruchomić po renderowania dokumentu:

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

Answer 2

Aby dodać element przy użyciu JavaScript, trzeba zrobić 2 rzeczy .

1. utworzenia elementu

   var elementu = document.createElement (Zmienna);

2. go dodać do dom

   document.body.insertBefore (selektora elementu);

lub

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

Więcej informacji tutaj: MDN

Answer 3

Jeśli węzeł DOM jest tworzone dynamicznie, to nie ma potrzeby kiedykolwiek go znaleźć dzięki document.getElementById().

Tworząc węzeł we właściwy sposób, można zachować odniesienie do niego jako zmiennej javascript, która może być używana w dowolnym miejscu w zakresie.

Na przykład:

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'; 
     ... 
    } 
}; 

Uwaga: Funkcja wewnętrzna (zwany w pewnym punkcie (e) w przyszłości) ma dostęp do zmiennej myDiv ponieważ funkcja zewnętrzna tworzy „zamknięcie”, w ramach którego zmienne są przechowywane żywy i dostępny, nawet jeśli funkcja zewnętrzna została zakończona i zwrócona.