Javascript 用JS类替换multiple元素字符串的一部分

我正在学习JS，但仍然有一些麻烦。我设法编辑了一个WYSIWYG编辑器，允许用户单击一个按钮“脚注”，插入以下HTML：

<span class="footnote" data-toggle="tooltip" title="footnote">[FN]</span>

以及一些HTML的示例：

Here is a text with a note.<span class="footnote" data-toggle="tooltip" title="footnote">[FN]</span> And there will be a second one too!<span class="footnote" data-toggle="tooltip" title="footnote">[FN]</span>

这似乎不起作用，但我不知道我的错误在哪里。另外，我想，既然我要用JS来修改脚注，我还是不使用CSS，而是用JS在所有元素中创建越来越多的元素，对吗

下面是一个演示实例的示例

必须检查脚注节点列表的长度属性。您正在尝试替换元素本身，而不是其中的文本。必须替换元素的textContent或innerText属性

请尝试以下方法：

var footnotes=document.getElementsByClassName（'footnote'）；
对于（变量i=0；i

正文{
计数器复位：计数器；
}
注：之前{
计数器增量：脚注计数器；
内容：计数器（脚注计数器）；
位置：相对位置；
顶部：-0.4em；
能见度：可见；
}
脚注{
颜色：#0389b9；
字体大小：0.875rem；
}

这是一篇带注释的文章。[FN]还有第二篇！[FN]

为了摆脱CSS计数器，我将其更改为

textContent.replace（“[FN]”，I+1）

。这似乎可行，但我的IDE（PHPStorm）告诉我“参数类型与参数不匹配”。你会说这是正确的方法吗？@DirkJ.Faber，你所说的CSS计数器是什么意思？你是说for循环计数器吗？我相信如果没有某种迭代，你就无法做到这一点，因为你要替换的文本在不同的元素中：）我曾经用

span在元素中设置一个数字。脚注：before

和

计数器重置：footnotecounter创建数字1、2、3等。。。考虑到我现在无论如何都在使用JS，我想我最好还是用
textContent.replace（“[FN]”，I+1）
来实现这一点，这似乎很有效。。。然后，我可以删除所有用于创建可见数字的CSS。这有意义吗？@DirkJ.Faber，小提琴的代码对我来说似乎是正确的。虽然我已经添加了另一个解决方案，用一个类替换SPAN元素的文本，并在该类中编写CSS。当您遇到一些IDE问题时，您可以尝试以下方法：）干杯，这很有效。这似乎只是一个IDE问题，但这可以消除错误；）
Here is a text with a note.<span class="footnote" data-toggle="tooltip" title="footnote">[FN]</span> And there will be a second one too!<span class="footnote" data-toggle="tooltip" title="footnote">[FN]</span>

footnotes = document.getElementsByClassName('footnote');
for (var i = 0; i < length; i++){
  footnotes[i].replace("[FN]", " ");
}