logo标签列表

如何将JavaScript变量“输出”到HTML div中

javascripthtml
10

我有一个JavaScript变量，我希望HTML div输出7。

我知道这很简单，但我似乎无法理解它。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">

            var ball = 3+4;
        </script>
    </head>

    <body>
        <div>Have 7 output here</div>
    </body>
</html>
5个回答
8
为 div 元素指定一个具体的 id，例如：
<div id="data"></div>

现在使用以下 JavaScript 代码。
<script type="text/javascript">
    var ball = 3+4;
    document.getElementById("data").innerHTML=ball;
</script>
6

这里是可运行的代码

将你的脚本写在body标签内。

代码

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div>Have 7 output here</div>

        <script type="text/javascript">
            var ball = 3+4;
            document.getElementsByTagName('div')[0].innerHTML = ball;
        </script>
    </body>
</html>
JavaScript 代码放在 body 中有什么区别？ - Peter Mortensen
2

试试这个：

<head>
    <script type="text/javascript">
        var ball = 3+4;
        function op()
        {
            document.getElementById('division').innerHTML=ball;
        }
    </script>
</head>

<body onload="op();">

    <div id="division">Have 7 output here</div>
</body>
2

试试这个：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      onload = function () {
        var ball = 3 + 4;
        var div = document.getElementsByTagName("div")[0];
        div.innerHTML = ball;
      };
    </script>
  </head>
  <body>
    <div>Have 7 output here</div>
  </body>
</html>

onload会在页面完全加载后执行，因此DIV已经准备好被操作。 getElementsByTagName("div")返回页面中所有DIV的列表，由于你的代码中只有一个DIV，所以我们获取第一个（[0]）。

最后，我猜innerHTML不需要任何解释 :-)

2

演示

HTML

<html>
    <body>
        <div id="add_results_7"></div>
    </body>
</html>

JavaScript

<script>
    var ball = 3+4;
    document.getElementById('add_results_7').innerHTML=ball; // Gives you 7 as your answer
</script>
在问题中，他明确提到34是预期的答案......我给了他两个解决方案......我不想假设任何事情...... - malcolmX
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接