Why JQuery isn't appending HTML to DOM

Question

So I'm trying to use handlebars and jquery to handle some DOM manipulation after an AJAX call.

I have something like this:

<script id="answers-template" type="text/x-handlebars-template">
<td>
    <tr id="detail-{{userId}}">
      <td colspan="100">
        <table id="itemList" class="table table-striped">
            <thead>
                <tr id="head" class="dataRow">
                    <th class="cenas">cenas</th>
                    <th class="coisas">coisas</th>
                    <th class="bicho">bicho</th>
                </tr>
            </thead>
            <tbody>
                {{> templateDetailsItem}}
            </tbody>
        </table>
      </td>
    </tr>
</td>
</script>
<script id="template-details-item" type="text/x-handlebars-template">
{{#each responses}}
    <tr id="{{id}}">
        <td>{{nome_contacto}}</td>
        <td>{{numero_contacto}}</td>
        <td>{{preco}}</td>
    </tr>
{{/each}}
</script>

And JavaScript:

const answersOfUser = {
    userId: itemId,
    responses: response
};
Handlebars.registerPartial("templateDetailsItem", $("#template-details-item").html());
const template = Handlebars.compile($("#answers-template").html());
$('table#itemList tbody td')
    .append(template(answersOfUser));

But nothing happens. Not even an error.

As far I can tell Handlebars is working fine because this console.log(template(answersOfUser)) gives me a string with the full html I want appended.

The string given is in multi line without any escape chars. Could this be it?

What's wrong with my approach?

Answer 1

I was eventually able to figure out. There was a mix of issues. Returns don't seem that well accepted by jquery append or after, also I had an issue with the table. Just would like jquery would give some kind of error instead of empty everything.

praise @Ben Osborne for pointing me in right direction.

Template:

    <script id="answers-template" type="text/x-handlebars-template">
    <tr id="detail-{{userId}}">
        <td colspan="100">
            <table id="itemList" class="table table-striped">
                <thead>
                    <tr id="head" class="dataRow">
                        <th class="cenas">cenas</th>
                        <th class="coisas">coisas</th>
                        <th class="bicho">bicho</th>
                    </tr>
                </thead>
                <tbody>
                    {{> templateDetailsItem}}
                </tbody>
            </table>
        </td>
    </tr>
</script>
<script id="template-details-item" type="text/x-handlebars-template">
    {{#each responses}}
    <tr id="{{id}}">
        <td>{{nome_contacto}}</td>
        <td>{{numero_contacto}}</td>
        <td>{{preco}}</td>
    </tr>
    {{/each}}
</script>

JS:

const answersOfUser = {
    userId: itemId,
    responses: response
};
Handlebars.registerPartial("templateDetailsItem", $("#template-details-item").html());
const template = Handlebars.compile($("#answers-template").html());
const htmlTemplate = template(answersOfUser);
$(that).parent().parent().after(htmlTemplate.replace(/[\r\n]/g, ''));