innerHTML 未显示在 DOM 中，控制台中没有错误

Question

这可能是一件微不足道的事情，但我似乎无法弄明白。 document.getElementById 选择我试图写入数据的 tspan，但没有显示任何内容。代码如下。 var percentAS 设置为 71，工作正常。控制台中没有错误。请注意，这是我的代码的最小化版本，文档中实际上还有很多内容。

<body>
    <text id="data" fill="white" x="460" y="160">
        {{signups.[0]}} -
        <tspan id="percentAS"></tspan>
    </text>
</body>

<script>
    document.getElementById("percentAS").innerHTML = percentAS + "%";
</script>

我尝试将一些数据记录到控制台以查看发生了什么：

console.log(document.getElementById("percentAS"));

并且在错误控制台中返回：

tspan#percentAS.[object SVGAnimatedString]
  innerHTML: "71%"
  __proto__: SVGTSpanElementPrototype

EDIT 其他人要求提供更多上下文，但我确信没有任何内容干扰我在上面粘贴的内容，否则我会添加更多上下文。这只是一些基本的 sgv 多边形，阅读起来非常痛苦，因为它们有太多的点，这就是我没有包括它们的原因。

编辑 2 看来我的问题是 Safari 网络浏览器独有的，因为我在 Chrome 和 Firefox 中打开它并且它工作得很好。我找不到与此相关的 Safari 的任何已知问题，尽管我发现几年前的几篇博文详细介绍了类似的问题。

Answer 1

你的问题是在你的 Javascript 中，变量 percentAs 没有绑定到任何东西。

如果您给它一个值，例如 var percentAs = 45，它就可以工作。

编辑：根据某人的评论。很高兴看到 percentAs 在您的代码中声明的位置，因为这可能会影响尝试访问它的函数的工作方式。

Answer 2

这工作正常。您的代码中肯定还有其他问题。

var percentAS = 71;
document.getElementById("percentAS").innerHTML = percentAS + "%";

<text id="data" fill="white" x="460" y="160">{{signups.[0]}} -
    <tspan id="percentAS"></tspan>
</text>

Answer 3

看起来这是 Safari 网络浏览器本身的问题，而不是代码的问题。我改用 jQuery 来做：

 $("#percentAS").append(percentAS + "%");

它在所有浏览器中都运行良好。

innerHTML 未显示在 DOM 中，控制台中没有错误

innerHTML not displaying in the DOM, no errors in the console

javascript

innerhtml

getelementbyid