通过innerHTML添加DOM元素后，为何无法用getElementById获取？

嘿，这个场景我太熟悉了！先给你吃个定心丸：通过innerHTML添加的元素是一定会被加入DOM的，你拿不到大概率是代码执行的时机或者顺序出了问题，咱们一步步拆解解决~

为什么会返回空对象？ #

最常见的原因有两个：

1. 获取元素的代码执行得太早了
   如果你是在设置innerHTML之前就去调用getElementById('bar')，那肯定拿不到——毕竟元素还没被创建出来。哪怕是设置完之后，但如果中间插入了异步操作（比如定时器、网络请求），也可能因为DOM还没完成更新就去获取？不过其实innerHTML是同步操作，赋值完成后DOM会立即更新，这种情况比较少见。
2. 你的脚本在DOM还没完全加载时就执行了
   比如你把脚本放在<head>标签里，这时候页面里的<div id="foo"></div>还没被浏览器渲染出来，document.getElementById('foo')本身就返回null，更别说往里加元素了。这种情况很容易被忽略！

正确的解决方法 #

方法1：确保获取操作紧跟在innerHTML赋值之后 #

既然innerHTML是同步更新DOM的，那只要把获取代码放在赋值语句的下一行，就能直接拿到元素：

// 先找到foo元素（确保它已经存在于DOM中）
const foo = document.getElementById('foo');
if (foo) {
    // 赋值innerHTML，同步更新DOM
    foo.innerHTML = "<div id='bar'></div>";
    // 紧跟在后面获取bar，肯定能拿到
    const bar = document.getElementById('bar');
    if (bar) {
        bar.focus();
    }
}

方法2：让脚本在DOM完全加载后执行 #

如果你的脚本放在页面头部，或者不确定DOM什么时候加载完成，就用DOMContentLoaded事件来包裹代码，确保所有DOM元素都渲染完毕后再执行操作：

document.addEventListener('DOMContentLoaded', function() {
    // 这里DOM已经完全就绪了
    const foo = document.getElementById('foo');
    if (foo) {
        foo.innerHTML = "<div id='bar'></div>";
        const bar = document.getElementById('bar');
        bar?.focus(); // 可选链操作，避免null报错
    }
});

另外，也可以把脚本标签放在<body>的最后面，这样浏览器会先渲染完所有DOM元素再执行脚本，效果是一样的。

方法3：用原生DOM API创建元素（更推荐） #

innerHTML虽然方便，但如果内容是用户输入的话有XSS风险，而且还要额外去查找元素。用createElement和appendChild的方式，能直接拿到元素的引用，不用再调用getElementById，更高效也更安全：

document.addEventListener('DOMContentLoaded', function() {
    const foo = document.getElementById('foo');
    if (foo) {
        // 创建bar元素
        const bar = document.createElement('div');
        bar.id = 'bar';
        // 添加到foo里
        foo.appendChild(bar);
        // 直接用bar元素设置焦点
        bar.focus();
    }
});

总结一下 #

• innerHTML添加的元素确实会被加入DOM，拿不到的问题几乎都是执行时机导致的；
• 最简单的解决方式就是保证获取元素的代码在设置innerHTML之后执行；
• 优先使用原生DOM API创建元素，既能避免潜在风险，又能直接操作元素引用，减少不必要的DOM查询。

内容的提问来源于stack exchange，提问作者Sasha Grievus