getElementById其中元素是在運行時動態創建的

Question

我在運行時使用innerHTML標記創建了一個對象，現在我想通過使用getElementById訪問此元素，當我訪問元素時它的返回NULL值。請給我建議任何方向，這樣我可以達致這，

這裏是我使用

在HTML

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

在JS

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

這裏的obj下面的代碼提示返回空值。

Answer 1

您是否爲新創建的元素分配了ID？您是否將元素插入文檔樹中（使用appendChild或insertBefore）？只要該元素沒有插入到DOM中，就無法使用document.getElementById進行檢索。元素創建的

例子：

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

[編輯]考慮到以後提供的代碼，第三個問題出現了：是你的腳本位於HTML頁面的底部（右收盤</body>標記之前）？如果它位於文檔的標題中，則可以在之前運行腳本，完成文檔樹的渲染。如果你的腳本必須是在文檔的標題，你可以使用負載處理後渲染的文件來運行它：

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

Answer 2

要使用JavaScript添加元素，你需要做兩件事情。

1. 創建元件

   變種元素=使用document.createElement（標籤名）;

2. 它添加到DOM

   document.body.insertBefore（選擇器，元件）;

或

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

此處瞭解詳情：MDN

Answer 3

如果是動態創建一個DOM節點，那麼就沒有必要EVER與document.getElementById()再次找到它。

通過以正確的方式創建節點，您可以將其引用爲一個JavaScript變量，它可以在範圍內的任何位置使用。

例如：

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

注：內部函數（稱爲在某些點（一個或多個）將來）有權訪問myDiv變量，因爲外部函數形成「閉合」，在其內部變量保持即使外部函數已經完成並返回，仍然可用且可訪問。