如何使用javascript变量更新HTML中的span元素？

Question

我正在尝试更新span元素以显示我的javascript变量是否正确？

 var hometown = "Indianapolis" ; document.getElementById('hometown').innerHTML = 'Indianapolis'; 

 Hometown: <span id="hometown"></span> 

谢谢你的帮助

Answer 1

它基本上是正确的，除非你从不使用你的变量，所以没有指向变量。 如果要使用变量进行更改，则可以执行此操作。

 var hometown = "Indianapolis"; document.getElementById('hometown').innerHTML = hometown; 

 Hometown: <span id="hometown"></span> 

使用此代码，您可以将文本输入设置为变量hometown ，就像这样。

 function update() { var hometown = document.getElementById("text").value; document.getElementById("hometown").innerHTML = hometown; } 

 Hometown: <span id="hometown"></span> <br> <input type="text" id="text"> <input type="button" onClick="update()" value="Update"> 

我知道这个有点复杂，但它有效，而且这都是你的代码。

Answer 2

不完全的。 您没有使用变量。

document.getElementById('hometown').innerHTML = hometown;

由于您没有设置html内容，因此使用.textContent属性是一个更好的选择：

document.getElementById('hometown').textContent = hometown;

还要确保在选择元素之前将元素添加到DOM，即将脚本放在目标span元素之后。

Hometown: <span id="hometown"></span>
<script> /* JavaScript code goes here */  </script>