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变量，因为外部函数形成“闭合”，在其内部变量保持即使外部函数已经完成并返回，仍然可用且可访问。