How to insert a large amount of HTML into the DOM without using AJAX or "Mega Strings"

Question

Right now, when a button is clicked on my page, I want a div to be populated with a lot of HTML-- a small form's worth. The strategy I'm using now implements usage of the .html() JQuery method which passes in this behemoth string:

'<div class="container-fluid">' +
    '<div class="row"> &nbsp; </div>' +        
    '<div class="row"> &nbsp; </div>' +
    '<div class="row"> &nbsp; </div>' +
        '<div class="col-md-3 col-md-offset-1 col-sm-6">' +
            '<select id="measures" class="form-control">' +
                '<option>Select a Measure</option>' +
            '</select>' +
        '</div>' +
        '<div class="col-md-3 col-sm-6">' +
            '<select id="budgets" class="form-control">' +
            '</select>' +
        '</div>' +
        '<div class="">' +
            '<button class="col-md-1  text-center col-sm-2 btn btn-primary" id="createSMSButton">Create Summary</button>' +
        '</div>' +
        '<div class="">' +
            '<button class="col-md-2 col-md-offset-1 col-sm-3 btn btn-primary" id="createBudgetReportButton">Create Budget Report</button>' +
        '</div>' +
    '<div class="row"> &nbsp; </div>' +
    '<div class="row"> &nbsp; </div>' +
    '<div class="row"> &nbsp; </div>' +
'</div>';

I don't really like the fact that this string is so bug-prone. I also don't really like the idea of requesting a new .cshtml file from the server, which would take up server/ network time, and force users to wait for an AJAX request to happen. Is there a way to add all this HTML to a div without use of a string this long and delicate and/or slow AJAX requests?

One solution can be found here: http://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script — Stryner, Aug 11 '15 at 21:23
You could load the html and just add `display: none;` to `div.container-fluid` and then show it when it is needed. AJAXing in content as it is need is a great practice though. — Craig Harshbarger, Aug 11 '15 at 21:24
The HTML code seems to be static, why not just hardcode it to the file, and show/hide it with CSS/JS? — Teemu, Aug 11 '15 at 21:24

Andrea Casaccia · Accepted Answer · 2015-08-12T18:35:18.947

Since you don't want to use Ajax (which would allow you to have templates in separate files), what you can do is storing your html in a tag with type="text/html" and retrieve it accessing the innerHTML property of the script element.

<script id="html" type="text/html">
    <div class="container-fluid">
        <div class="row"> &nbsp; </div>        
        <div class="row"> &nbsp; </div>
        <div class="row"> &nbsp; </div>
            <div class="col-md-3 col-md-offset-1 col-sm-6">
                <select id="measures" class="form-control">
                    <option>Select a Measure</option>
                </select>
            </div>
            <div class="col-md-3 col-sm-6">
                <select id="budgets" class="form-control">
                </select>
            </div>
            <div class="">
                <button class="col-md-1  text-center col-sm-2 btn btn-primary" id="createSMSButton">Create Summary</button>
            </div>
            <div class="">
                <button class="col-md-2 col-md-offset-1 col-sm-3 btn btn-primary" id="createBudgetReportButton">Create Budget Report</button>
            </div>
        <div class="row"> &nbsp; </div>
        <div class="row"> &nbsp; </div>
        <div class="row"> &nbsp; </div>
    </div>
</script>

var html = document.getElementById("html").innerHTML;

Another option is to use RequireJs with text plugin https://github.com/requirejs/text to load templates as a dependency of your modules.

define(['text!/templates/content.html'], function() {
    /*...*/
});

Behind the scenes RequireJs will make an Ajax request to download your template, but I think you should consider the benefit in your application mantainability having separate files for templates.

Additionally you could use the RequireJs optimizer tool to bundle all the dependency in a single file and avoid the extra calls.

I think I see Andrea's intention, but he doesn't provide much explanation. Basically, a script with a non-javascript `type` attribute will not be parsed by anything, so you can grab its content in a JS script and use it for yourself. You can replace the `id` attribute value with a more accurate identifier — Katana314, Aug 11 '15 at 21:33

How to insert a large amount of HTML into the DOM without using AJAX or "Mega Strings"

1 Answers1