我可以将 HTML 字符串分配给 HTML DOM 节点的内部 HTML 属性吗?

Can I assign an HTML string to the innerHTML property of a HTML DOM node?

本文关键字：HTML 内部 属性 节点 DOM 字符串 分配 我可以      更新时间：2023-09-26

我想从给定的字符串填充html元素，这似乎没有更新dynamic-contentdiv中的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

工作正常。

假设你在头文件中加载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>

相关文章：