Can a JavaScript variable be used in plain HTML?_问答_开发者

Can a JavaScript variable be used in plain HTML?

开发者 https://www.devze.com 2023-01-11 04:13 出处：网络

What I mean is, can a variable/array declared and initialized be used in HTML, outside the 开发者_运维问答<script>-tags? Fx.

What I mean is, can a variable/array declared and initialized be used in HTML, outside the 开发者_运维问答<script>-tags? Fx.

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

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

How do you access the variable/array in this case? like this:

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

Two ways to do this. This is the better one:

<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>

Or you could do it this way (which, as Marcel points out, doesn't work in XHTML and really shouldn't be used anyway):

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

You can do something like this:

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

where an element has the specified id:

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

you simply cannot access javascript variable outside of the script tag, it is because,

Html does not recognise any variable it just renders the supported HTML elements
variables are used to store the temporary variables, that is for dynamic data, if you want something more dynamic then you can use PHP for that.

Unnecessarily verbose, but using standard DOM methods.

<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>

That's the only direct way you'll access it elsewhere in your page. By opening another script tag and printing it.

You can also use methods such as innerHTML to put the value somewhere.

I don't think you can access the javascript from html but you can set the innerhtml of a dom object through javascript so you may want to go the other way around. First google search I found so I cant promise its good but it has a quick sample.

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

You can even you AngularJS expression.

<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>

The above code will print out "I want to use variables directly in HTML using: AngularJS".You can use braces to write AngularJS expression. For example: {{ expression }}.