我可以将HTML字符串分配给HTML DOM节点的innerHTML属性吗？

Question

我想填充给定字符串中的html元素，这似乎不会更新dynamic-content div中的html：

在index.html：

<div id='dynamic-content'>
</div>

在index.js：

var dynamicContentNode = document.getElementById('dynamic-content');
dynamicContentNode.innerHTML = '<div><p>oh hai</p></div>';

我没有对此进行测试吗？

编辑：我分配给innerHtml NOT innerHTML

Answer 1

完美无缺。

假设您在头文件中加载了JS文件，因此DOM没有准备好（在JS执行时div不存在），因此您可以将整个内容包装在window.onload中回调或加载HTML文件末尾的JS文件。

请参阅以下两个示例之间的差异，以反映在HTML之前和之后加载JS时实际发生的情况。

---

非工作版本：

<script>var dynamicContentNode = document.getElementById('dynamic-content');
dynamicContentNode.innerHTML = '<div><p>oh hai</p></div>';</script>
<div id='dynamic-content'>
</div>

工作版本：

<div id='dynamic-content'>
</div>
<script>var dynamicContentNode = document.getElementById('dynamic-content');
dynamicContentNode.innerHTML = '<div><p>oh hai</p></div>';</script>

使用onload回调工作的非工作版本：

<script>
  window.onload = function(){
    var dynamicContentNode = document.getElementById('dynamic-content');
    dynamicContentNode.innerHTML = '<div><p>oh hai</p></div>';
  }
</script>
<div id='dynamic-content'>
</div>