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

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.