template tag does not include content

Question

I have some html wrapped in a template, however when I try to activate the template and change some of the elements within the template, it comes back as null. I have done a console.log on the template and all that comes back is the start of the template tag and end tag e.g. <template id="panel-template"></template> this is the rendered version, and as you can see none of the html that is supposed to be encapsulated within are not present.

Here is my template

<template id="panel-template">
<div class="panel panel-default" draggable="true">
    <div class="panel-heading">
        <h3 class="panel-title">
            Panel title
            <span class="glyphicon glyphicon-pencil panel-icons"></span>
            <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
            <span class="glyphicon glyphicon-trash panel-icons"></span>
        </h3>
    </div>
    <div class="panel-body">
    </div>
</div>

and here is part of the javascript that is related to the template, I have of course wrapped this in document.ready

if ('content' in document.createElement('template')) {

                    //var widgetCount = document.getElementById('columns').getAttribute('data-count');
                    var widgetModel = @Html.Raw(Json.Encode(Model.widgets));

                    for (var i = 0; i < widgetModel.length; i++) {
                        var clone = loadwidgets(widgetModel[i]); //This function is in an external js file
                        var inputDestination = document.querySelector('#col2')
                        console.log(inputDestination);
                        inputDestination.appendChild(clone);
                    }
                }

and here is the loadWidgets function.

function loadwidgets (jsonObject) {
var template = document.querySelector('#panel-template');
var panelTitle = template.querySelector('div.panel-title');
var widgetType = template.querySelector('div.panel-body');

console.log(template);

//We give the widget a name on top of panel, this will be user defined.
panelTitle.textContent = jsonObject.WidgetName;
widgetType.setAttribute('id', jsonObject.WidgetCode);

return document.importNode(template, true);

}

I get an error saying panelTitle is null, but I think this is because when activating the template, it doest not seem to pull through the encapsulated html elements. I am unsure how to proceed.

Answer 1

I see in your Javascript part that you state that if you create an element. You need to start the code. But i don't see you craeting the element "template"

Answer 2

You should use querySelector() on the template's content property:

var panelTitle = template.content.querySelector('div.panel-title');

as explained in the link you provided.