DOM 元素的 InnerHTML 属性已更改，但未呈现

Posted 2023-05-07

【中文标题】DOM 元素的 InnerHTML 属性已更改，但未呈现

【英文标题】：InnerHTML property of DOM element changed, but not rendering

【发布时间】：2015-10-29 14:30:24

【问题描述】：

所以我正在使用 innerhtml 尝试添加一个带有计数变量的 dom 元素，我在 console.logging dom 元素和属性 innerHTML 更改为我想要的，但它没有呈现到页面/添加dom 元素..

console.log 关于 dom 元素 [a.aero, innerHTML: "<span>4</span>"]

更改 dom 的代码 document.getElementsByClassName("aero").innerHTML="<span>"+count+"</span>";

检查目标类元素上的元素 <a class="aero" href="/c/"> <script src="js/aero.js"></script> </a>

感谢您的帮助。

【参考方案1】：

getElementsByClassName 返回一个元素列表（即使它只有 1 个） - 所以你的代码 NOT 实际上根本不会改变任何 DOM 元素的 innerHTML

所以你可以使用类似的东西

document.getElementsByClassName("aero")[0].innerHTML="<span>"+count+"</span>";

如果你知道只有一个元素具有“aero”类

【讨论】：

天哪，非常感谢@Jaromanda X.. 老实说，谢谢你。

【参考方案2】：

getElementsByClassName() 方法以 NodeList 对象的形式返回具有指定类名的元素子元素的集合。

你需要这样做：

document.getElementsByClassName("aero")[0].innerHTML="<span>"+count+"</span>";

参考getElementsByClassName() - W3