Including <script> tag in <script type="text/template"> tag

Question

I am a new programmer and I have a little question. This is a part of my code:

<nav>
   <ul>
     <li><input type="button" value="HomePage" id="home1" data-page="home"></li>
     <li><input type="button" value="About" id="about1" data-page="about"></li>
   </ul>
</nav>

    <div id="content">
        <div class="page active">
            <div class=firstLoad>
            (some content...)
            </div>
        </div>
    </div>

<script type="text/template" id="home">
<div id="backImage">
  <div id="spinner">
</div>
<div>
   <input type="button" value="..." id="car" class="button">
</div>
<div>
   <input type="button" value="..." id="Car1" onclick="location.href='#'" class="button">
</div>
<div>
   <input type="button" value="..." id="reset" class="button">
</div>
</div>
<script src="location.js"></script>
</script>

My question is how can I use this "location.js" script tag in the html page (id="home") when I call this html page with innerHTML and I change the current appear page? No matter what I have done this script doesn't work for me at all in the html page.

Thank you...:)

Answer 1

No, that's not going to work for you. Not only is it invalid to have a <script></script> inside of another <script>, it wouldn't work even if the browser could parse it correctly. However, all you need to do is provide the javascript files you want to load in another manner, like in a dataset attribute. Additionally, as Quentin pointed out, text/template isn't a standard type, so prefix it with x- as standard practice

<script type="text/x-template" id="home" data-jsassets="location.js,/path/to/some/other.js">
   ...
</script>

Now, retrieve the comma-delimted list of javascript to load and inject it into the page, which will run the script:

var tpl, jsassets, tag, i,l;
tpl = document.getElementById('home');
// At this point, ensure your template has been rendered and attached to the page
// by your template processor
jsassets = (tpl.getAttribute('data-jsassets') || '').split(',');
for(i = 0, l = jsassets.length; i < l; i++){
  tag = document.createElement('script');
  tag.type = "text/javascript";
  tag.src = jsassets[i];
  document.head.appendChild(tag);
}

Answer 2

HTML provides no means to include the sequence </script> inside a script element.

XHTML allows you to use CDATA markers or entities, but that isn't an option for HTML. (Note that XHTML served as text/html does not provide this option and browsers will use an HTML parser).

The language used inside the script needs to provide a mechanism to avoid the problem.

In JavaScript, for instance, / and \/ mean the same thing inside a string, so you can "<\/script>".

text/template isn't a standard MIME type. Presumably it is a custom template format used by some JS on the page. That JS would need to support some form of escaping mechanism when it is parsing the template. You may have to extend whatever library you are using to process your template.