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

Question

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

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

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

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

感谢您的帮助。

Answer 1

getElementsByClassName returns 一个元素列表（即使它只有 1 个）- 所以你的代码 NOT 实际上改变了任何 DOM 元素的 innerHTML完全

所以你可以使用像

这样的东西

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

如果你知道只有一个元素 "aero" class

Answer 2

The getElementsByClassName() method returns a collection of an element's child elements with the specified class name, as a NodeList object.

您需要这样做：

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

InnerHTML property of DOM element changed, but not rendering