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

- Siddiqui

---

一些代码片段会很有帮助。 - Sirko

尝试使用此处的代码片段：这里 - Elena

请现在检查，我已经编辑过了。 - Siddiqui

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

- KooiInc

---

@kooilnc，我在哪里以及如何找到动态创建的元素，该元素尚未添加到DOM中？ - Phalgun

@Phalgun 在内存中。在这种情况下，你可以将 myDiv 视为有效，只要它没有被添加到 DOM 中。如果它已经被添加，可以使用常规的 DOM 检索方法来获取和/或操作它。 - KooiInc

我有一个场景，其中我调用了第三方（Angular File Saver - https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js）公开的方法，该方法创建一个锚元素，形成createObjectURL()并在不添加到DOM的情况下单击它。 在尝试从AngularJS应用程序中的protractor进行测试时，我无法找到动态创建的元素。您如何建议我获取由Angular File Saver创建的锚元素的引用？ - Phalgun

你让我感到很有压力。我对Angular的了解很少（而且宁愿保持这种状态）；也许创建一个新的SO问题是个好主意，可以参考这个问题？ - KooiInc

Answer 2

使用JavaScript添加元素，需要完成两个步骤。

1. 创建元素

   var element = document.createElement(tagName);

2. 将其添加到DOM中

   document.body.insertBefore(selector, element);

或者

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

更多信息请参见：MDN

- Codrin Eugeniu

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变量，因为外部函数形成了一个“闭包”，在其中变量保持活动和可访问，即使外部函数已经完成并返回。

- Beetroot-Beetroot

---

嘿@Beetroot-Beetroot，如果新创建的元素被创建但我们不知道引用变量，那么这将是一个麻烦。无论如何，如何实现getElementById()？有没有第三方注入或其他方法... - gumuruh

这并没有回答问题。最好不要假设任何关于他们代码库的事情。那个元素的创建可能在代码库的某个部分中，该部分对获取该元素的部分是不可访问的。即使它是可访问的，请考虑其他人来到这个问题寻找答案，而不是一个适用于特定人的解决方法。 - Variadicism