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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

感谢您的帮助

Answer 1

除了你从不使用变量之外，它基本上是正确的，所以变量没有意义。如果你想使用变量来改变它，你可以这样做。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 使用此代码，您可以将文本输入设置为变量hometown，如下所示。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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>