Why does the handlebar script not work outside body tag

Question

I have an index.html file with some handlebars template scripts (and the handlebars.js file in same directory..) I am just wondering why the handlebars script does not work if I place it under (outside) the tag... it only works inside it, why? Is it because the DOM is not already rendered at this point?

This works (but not if the part with "script id="quoteTemplate" ..... until document.getElementById(..))" is placed under the body... :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Handlebars Tutorial</title>
    <style type="text/css">
        .redText {color: red;}
        .blueText {color: blue;}
        .greenText {color: green;}

    </style>
    <script src="handlebars-v4.7.6.js"></script>

</head>
<body>
    <h1>First handlebars tutorial...</h1>
    <div id="marcData"></div>
    <br>
    <div id="quoteData"></div>


    <script id="quoteTemplate" type="text/x-handlebars-template">
        <h3>Favorite {{name}} Quotes</h3>
        <ol>
            {{#each quotes}}
            <li>{{quote}}</li>
            {{/each}}
        </ol>
    </script>
    <script type="text/javascript">
        let quoteInfo = document.getElementById("quoteTemplate").innerHTML;

        let template = Handlebars.compile(quoteInfo);

        let quoteData = template({
            name: "Yogi Berra",
            quotes: [
                { quote: "First quote" },
                { quote: "Second quote" },
                { quote: "Third quote" },
                { quote: "Fourth quote" },
                { quote: "Fifth quote" },
                { quote: "Sixth quote" }
            ]
        });

        document.getElementById("quoteData").innerHTML += quoteData;
    </script>

</body>
<script type="text/javascript" src="src/js/first.js"></script>
</html>

score 1 · Accepted Answer · answered Jun 13 '20 at 19:14

I'm pretty sure it's the rendering as you thought it might be.

If you place something outside of / after the body the browser "thinks" you might just misplaced it and try to handle it like it was within the body.

Now how the different browsers handle this might be different and can cause problems.

If you place it after the tag, the browswer might handle it like the was after your misplaced element, so it would look like this:

<body>
    <h1>First handlebars tutorial...</h1>
    <div id="marcData"></div>
    <br>
    <div id="quoteData"></div>


    <script type="text/javascript">
        let quoteInfo = document.getElementById("quoteTemplate").innerHTML;

        let template = Handlebars.compile(quoteInfo);

        let quoteData = template({
            name: "Yogi Berra",
            quotes: [
                { quote: "First quote" },
                { quote: "Second quote" },
                { quote: "Third quote" },
                { quote: "Fourth quote" },
                { quote: "Fifth quote" },
                { quote: "Sixth quote" }
            ]
        });

        document.getElementById("quoteData").innerHTML += quoteData;
    </script>

    <script id="quoteTemplate" type="text/x-handlebars-template">
        <h3>Favorite {{name}} Quotes</h3>
        <ol>
            {{#each quotes}}
            <li>{{quote}}</li>
            {{/each}}
        </ol>
    </script>

</body>

Now if the browser handled it in this way when the first script runs the next doesn't exist.

(To make sure the page is fully loaded before your script does something onload can be used like in the answer here: Javascript can't find element by id?)

Why does the handlebar script not work outside body tag

1 Answers1