jQuery With Mustache js Issue

Question

I'm using jQuery and Mustache Js in a project.

I have the template in a script tag. The template requires some dynamic/variable html based on some data. Hence I load the template using jQuery, manipulate it, and then write it back into the script tag.

However, loading the template into a div(for manipulation), using jquery seems to alter the structure of the template (it moves things around), which invalidates the template.

How do i update the template dynamically and avoid this issue? (Any help / Pointers / etc)

Original Template

<table>
    <thead>
        <tr>
            <td>FN</td>
            <td>SN</td>
            <td>OT</td>
        </tr>
    </thead>
    <tbody>{{#Users}}
        <tr class="tr-border" data-row-id="{{DCSID}}">
            <td class="td-border">{{FN}}</td>
            <td class="td-border">{{SN}}</td>
            <td class="td-border">{{OT}}</td>
        </tr>{{/Users}}</tbody>
</table>

Loading with jquery into another div causes this below(moves {{#Users}} {{/Users}} out of place)

   {{#Users}} {{/Users}}
   <table>
        <thead>
            <tr>
                <td>FN</td>
                <td>SN</td>
                <td>OT</td>
            </tr>
        </thead>
        <tbody><tr class="tr-border" data-row-id="{{DCSID}}">
                <td class="td-border">{{FN}}</td>
                <td class="td-border">{{SN}}</td>
                <td class="td-border">{{OT}}</td>
            </tr></tbody>
    </table

The code below is how I'm going about it. Also this is a js fiddle link here

var $newDcsTemplate = $('<div/>').html($('#dcs-template').html()); // for manipulation
var original1 = $('#dcs-template').html()
var original2 = document.getElementById('dcs-template').innerHTML;

// manipulate the template here and replace content of script tag with it.


console.log(original1); // works fine
console.log(original2) // works fine
console.log($newDcsTemplate.html()) // messed up the template

Answer 1

Your template is being modified by the DOM because you're inserting it into a <div> as "HTML", which it isn't. It's doing exactly what a browser would do if you gave it that markup. It's putting the {{# Users }} in the nearest available valid place to put it.

This is the same reason your template is originally stored in a <script> tag. You should always use <script> tags to hold your templates, and you should always use .text() to read and write them:

var $newDcsTemplate = $('<script/>').text($('#dcs-template').text());
console.log($newDcsTemplate.text())

Answer 2

Do it like this, with .html() and without </script>:

<table>
  <thead>
    <tr>
      <td>FN</td>
      <td>SN</td>
      <td>OT</td>
    </tr>
  </thead>
  <tbody>
    <!-- {{#Users}} -->
    <tr class="tr-border" data-row-id="{{DCSID}}">
      <td class="td-border">{{FN}}</td>
      <td class="td-border">{{SN}}</td>
      <td class="td-border">{{OT}}</td>
    </tr>
    <!-- {{/Users}} -->
  </tbody>
</table>