可以在纯 HTML 中使用 JavaScript 变量吗？答案

【问题标题】：Can a JavaScript variable be used in plain HTML?可以在纯 HTML 中使用 JavaScript 变量吗？
【发布时间】：2010-08-10 19:05:48
【问题描述】：

我的意思是，在 HTML 中声明和初始化的变量/数组可以在 <script>-tags 之外使用吗？外汇。

<script type="text/javascript">
var foo = array('placeholder1', 'placeholder2');
</script>

<body>
<p><!--access the variable here-->foo[0]</p>
</body>

在这种情况下，您如何访问变量/数组？像这样：

<p><script type="text/javascript">document.print(foo[0])</script></p>

??

【问题讨论】：

标签： javascript arrays variables

【解决方案1】：

有两种方法可以做到这一点。这个比较好：

<script type="text/javascript">
// make sure to do this onLoad, for example jQuery's $()
var foo = array('placeholder1', 'placeholder2');
document.getElementById("fooHolder").innerHTML = foo.toString();
</script>
...
<p id="fooHolder"></p>

或者你可以这样做（正如 Marcel 指出的那样，这在 XHTML 中不起作用，而且无论如何都不应该使用）：

<p><script type="text/javascript">document.write(foo)</script></p>

【讨论】：

document.write 在 XHTML 中不起作用：w3.org/MarkUp/2004/xhtml-faq#docwrite
这是设置 HTML 标记以包含 JavaScript 变量内容的一个很好的示例。但它不允许您在 HTML 中指定一个 JavaScript 变量，该变量会自动返回一个 JavaScript 变量的内容。正确的答案是，问的不能做，但这里有另一种方法。

【解决方案2】：

你可以这样做：

<script>
  var str = 'hello there';
  document.getElementById('para').innerHTML = str;
</script>

其中元素具有指定的 id：

<p id="para"></p>

【讨论】：

【解决方案3】：

您根本无法访问脚本标记之外的 javascript 变量，这是因为，

Html 无法识别任何变量，它只是呈现支持的 HTML 元素
变量用于存储临时变量，即动态数据，如果你想要更动态的东西，你可以使用 PHP。

【讨论】：

【解决方案4】：

不必要的冗长，但使用标准 DOM 方法。

<script>
    window.onload = function(){
        // you do not need to initialize like this, but I like to
        var bar1 = new String('placeholder1');
        var bar2 = new String('placeholder2');
        var foo = new Array();

        // populate the Array with our Strings 
        foo.push(bar1);
        foo.push(bar2);

        // create an array containing all the p tags on the page 
        // (which is this case is only one, would be better to assign an id)
        pArray = document.getElementsByTagName('p');

        // create a text node in the document, this is the proper DOM method
        bar1TextNode = document.createTextNode(foo[0].toString());

        // append our new text node to the element in question
        pArray[0].appendChild(bar1TextNode);
    };
</script>

<body>
    <p></p>
</body>

【讨论】：

【解决方案5】：

这是您在页面其他位置访问它的唯一直接方式。通过打开另一个脚本标签并打印它。

您还可以使用诸如 innerHTML 之类的方法将值放在某处。

【讨论】：

【解决方案6】：

我不认为您可以从 html 访问 javascript，但您可以通过 javascript 设置 dom 对象的 innerhtml，因此您可能想反其道而行之。我发现的第一个谷歌搜索，所以我不能保证它很好，但它有一个快速示例。

http://www.tizag.com/javascriptT/javascript-innerHTML.php

【讨论】：

【解决方案7】：

您甚至可以使用 AngularJS 表达式。

<html>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

     <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.framework= "AngularJS";
        });
    </script>

    <body>

        <div ng-app="myApp" ng-controller="myCtrl">
            <p>I want to use variables directly in HTML using: {{ framework }}</p>
        </div>

    </body>
</html>

上面的代码会打印出“我想直接在HTML中使用变量：AngularJS”。你可以使用大括号来编写AngularJS表达式。例如：{{ 表达式 }}。

【讨论】：