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

【问题标题】：innerHTML not displaying in the DOM, no errors in the consoleinnerHTML 未显示在 DOM 中，控制台中没有错误
【发布时间】：2015-06-16 17:23:07
【问题描述】：

这可能是微不足道的问题，但我似乎无法弄清楚。 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

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

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

【问题讨论】：

标签： javascript innerhtml getelementbyid

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：

你注意到[svg]标签了吗？
@Teemu 我觉得这个问题有那个标签很奇怪......这与什么有什么关系？
嗯，它并没有清楚地出现在代码中（可能是太小化了），但text 和tspan 是svg 元素。
@Teemu 好的，你能举个例子说明为什么在设置 tspan 元素的 innerHTML 时这是相关的吗？我已经证明提问者试图完成的工作实际上是有效的，如果按照所示完成，那么肯定有其他原因导致问题。
是的，还有其他事情发生，即SVG。您可以在 OP 提供的控制台日志记录中看到它。顺便提一句。不是我对这篇文章的反对意见。

【解决方案3】：

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

如果你给它一个值，比如var percentAs = 45，它就会起作用。

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

【讨论】：

如果percentAs 从未被声明过，就会出现错误。日志记录还显示它的值为 71%，尽管 OP 尚未发布分配该值的代码。
提问者说变量percentAs设置为71。
正如我在更新的问题中所说：也许他的percentAs 是在他尝试使用它之后被声明的。