Script tag attributes - javascript

Question

I am trying to understand the basics of templating and have the following problem. When I try to attach ID or/and type attribute to the <script> tag in my HTML code it just doesn't work:

<!DOCTYPE html>
<html>

           <head>
                 <link rel="stylesheet" type="text/css" href="style.css">
             <script src="somescript.js"></script>

           </head>
           <body>

    <script type="text/html" id="template1">
                <form name="formXY">
                    <p>
                        <label>Field1
                            <input type="text" name="form_field1" value= "{{field1}}">
                        </label>
                        <button type="button">Submit</button>
                    </p>
                </form>
            </script>
</body>
</html>

I ran this in chrome/firefox/IE9/Opera and none of them parse the code between the <script> tags. Browsers think it is just a text field. When I remove ID and type attributes it is again parsed correctly.

I am probably missing something very basic...

@Martin - yes, some frameworks and templating systems do it that way, does'nt mean it's generally a good idea! — adeneo
– adeneo, Commented Jan 12, 2013 at 23:22

Pete Mitchell · Accepted Answer · 2013-01-12 23:33:43Z

2

You need to add a non javascript type to the script tag, as the point is that you don't want the browser to parse it (as javascript), and by using a custom type the browser will ignore it (until you grab it with javascript that is)

<!DOCTYPE html>
<html>

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script src="somescript.js"></script>

</head>
<body>

    <script type="text/x-handlebars-template" id="template1">
        <form name="formXY">
        <p>
            <label>Field1
            <input type="text" name="form_field1" value= "{{field1}}">
            </label>
            <button type="button">Submit</button>
        </p>
        </form>
    </script>
</body>
</html>

And then in your javascript somescript.js you need to get the contents of that script tag using something like this

var uncompiledTemplate = document.getElementById('template1').innerHtml;

// then pass this template to your templating engine...
// if your using handlebars:
var template = Handlebars.compile(uncompiledTemplate);

And then you can work with your template!

edited Jan 12, 2013 at 23:33

answered Jan 12, 2013 at 23:18

Pete Mitchell

2,8791 gold badge19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DDEX Over a year ago

Thanks, thats the thing I was missing:)...so first I need to install a templating engine and after that I can use the attributes. Thanks

Pointy Over a year ago

The "text/html" type also protects the script contents from JavaScript (attempted) evaluation. It doesn't have to be a totally made-up type.

Pete Mitchell Over a year ago

@Pointy thanks! I'll update my answer. The custom type can be a good hint at what templating engine is in use perhaps? Some of the syntax can be similar

Pointy Over a year ago

@PeteMitchell oh yes definitely, esp. if the template system has hooks in it to auto-compile such templates.

Karlis Rode Over a year ago

Using "text/html" is crucial for an IDE like PyCharm to format the content of the script tag correctly. If you use a made-up type it will interpret the content as an ordinary string, making usage of IDE features like highlighting etc useless...

Neil · Accepted Answer · 2013-01-12 23:41:57Z

0

The content of the <script> tag is never parsed into DOM elements, the contents simply appear in the DOM as text (although <script> is display:none; by default so it does not appear on the page). If a type is provided has to be one that the browser recognises before it attempts to execute it. Note that older browsers used the language attribute instead.

answered Jan 12, 2013 at 23:41

Neil

55.5k8 gold badges65 silver badges74 bronze badges

Collectives™ on Stack Overflow

Script tag attributes - javascript

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related