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添加元素，您需要做两件事。

创建元素

var element = document.createElement（tagName）;
将其添加到dom

document.body.insertBefore（selector，element）;

或

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

此处有更多信息：MDN

Answer 3

如果动态创建DOM节点，则无需使用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变量，因为外部函数形成一个“闭包”，变量保持活动和可访问，即使外部功能已完成并返回。

getElementById在运行时动态创建Element的位置

3 个答案: