javascript - 通过更改 div 的 innerHtml 添加 DOM 元素会阻止以后使用 getElementById 找到它？

Question

我有一个 div，我正在使用 javascript 在其中添加一个新元素

原始分区:

<div id="foo"></div>

JavaScript:

document.getElementById('foo').innerHTML ="<div id='bar'></div>";

结果

<div id="foo">
  <div id="bar"></div>
</div>

但是在执行这段代码后，我尝试检索元素(以便专注于它)做

 document.getElementById('bar')

但这会返回一个空对象。

那么使用 innerHtml 添加元素不是真的将元素添加到 DOM 中吗？添加稍后可以通过 getElementById 检索的元素的正确方法是什么？

Answer 1

它工作得很好——确保你以正确的顺序运行它:

document.getElementById('foo').innerHTML ="<div id='bar'>Bar</div>";
console.log(document.getElementById("bar"));

<div id="foo">Foo</div>