javascript - getElementById 其中 Element 在运行时动态创建

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 返回 null 值。

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