我可以为HTML节点的innerHTML属性分配一个HTML吗？

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而不是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>

​