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

IT技术 javascript
2021-03-13 19:13:04

我在运行时使用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 返回空值。

3个回答

您是否为新创建的元素分配了 id?您是否将元素插入到文档树中(使用appendChildinsertBefore)?只要元素没有插入到 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');
};
我有一个场景,我调用第三方公开的方法(Angular File Saver - github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js),它创建一个锚元素,形成 createObjectURL() 并点击在不添加到 DOM 的情况下就可以了。在尝试从 AngularJS 应用程序中的量角器对此进行测试时,我无法找到动态创建的元素。您如何建议我获得对由 Angular File Saver 创建的锚元素的引用。
2021-04-17 19:13:04
你在这里强调我的知识。我对 Angular 知之甚少(而是想保持这种方式;)。为此创建一个新的 SO 问题可能是一个想法,也许引用这个?
2021-04-24 19:13:04
@Phalgun 在内存中。对于此答案myDiv,只要未将其添加到 DOM 中,您就可以解决如果它加入,通常的DOM的检索方法可用于检索和/或操纵它。
2021-05-06 19:13:04
@kooilnc,我在哪里以及如何找到尚未添加到 DOM 的动态创建的元素?
2021-05-07 19:13:04

要使用 JavaScript 添加元素,您需要做两件事。

  1. 创建元素

    var element = document.createElement(tagName);

  2. 将它添加到 dom

    document.body.insertBefore(选择器,元素);

或者

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

更多信息在这里:MDN

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

这并没有回答这个问题。最好不要对他们的代码库做任何假设。该元素创建可能位于获取元素的部分无法访问的代码库的一部分中。即使它是可访问的,请考虑其他人来寻找这个问题的答案,而不是对这个特定的人有效的解决方法。
2021-04-27 19:13:04
嘿@Beetroot-Beetroot,...我认为如果创建了新创建的元素但我们不知道引用变量,这将是一个麻烦。无论如何如何实现 getElementById() ?任何 3 方注射或其他东西....
2021-05-09 19:13:04