What to do about JS with lots of HTML

[dennis-fedco]

First, I gotta say I am new to JavaScript, but not new to languages like PHP/C++.

 

I am working on a large huge JS file that has a lot of things and I have a feeling that it can be made better.  How is where I am at a loss.  If it was PHP, I'd split that JS file into probably 20 other smaller JS files, aka "classes", and it may or may not be the right thing to do, but let me focus on one particular aspect for now, and maybe deal with others later.

 

Here is the piece of code that bugs the me most (truncated for clarity):

   if (selection[index].selected) {

        result += '<TABLE class="list_grey" style="float: left; margin-left: 20px;">';
        result += '<TR>';
        result += '<TH colspan="2">Data</TH>';
        result += '</TR>';
        
        var flag = "All";

        if (selection[index].flag == 'P')
            flag = "Premium";
        
        result += '<TR>';
        result += '<TD>Flag</TD>';
        result += '<TD>' + flag + '</TD>';
        result += '</TR>';
        result += '</TABLE>';
    }
    else
    {
        result += '<TABLE class="list_grey" style="float: left; margin-left: 20px;">';
        result += '<TR>';
        result += '<TH colspan="2">Frame</TH>';
        result += '</TR>';
        result += '<TR>';
        result += '<TD>Frame</TD>';
        result += '<TD>' + selection[index].frame + '</TD>';
        result += '</TR>';
        result += '</TABLE>';
    }

So what it does is this:

 

1.  it gets "selection" var with eval() from a DIV block of HTML page, where that DIV has a looooong prepared-by-PHP JSON string with all the options prepopulated from various sources accessible to PHP.

var selection    = eval("(" + document.getElementById("result").innerHTML + ")");

2.  It then dynamically constructs and populates further HTML using logic and data found in "selection" var.

 

3.  This particular JS implements a selection algorithm, where basically user clicking buttons can navigate "selection" var forwards and backwards, and as user does, the dynamic portion of HTML updates per behavior defined in the JS file.

 

My Problem / Question:  I have a feeling that putting HTML the way it is done here in JS file is not proper separation of concerns and not good way to code.  HTML should be. .. in HTML, when possible, but being new to JS I don't know if there is a better way.  Is there a more recommended way to code what I have now ?

 

 

[kicken]

There are various template engines for JS, such as mustache.js that you could use to keep the HTML neatly separated either in the HTML document or as a single variable declaration in the script. I tend to prefer to drop the HTML templates into the HTML page and reference them by ID, something like:

<script type="text/html" id="whateverTemplate">
 <div>
  <p>Put whatever HTML you need here</p>
  <p>With template {{placeholders}} that will be replaced</p>
 </div>
</script>

var template = document.getElementById('whateverTemplate').textContent;
var templateVars = { placeholders: 'variables' };
var html = Mustache.render(template, templateVars);