Возврат содержимого тега шаблона в виде строки

Question

Мне было интересно, есть ли способ получить содержимое элементов внутри тега шаблона и вернуть его в виде строки? На данный момент кажется, что он возвращает что-то вроде [object document fragment] но хочу только HTML-контент внутри.

function CreateWidget(widget) {
    //Check if browser supports templates
    if ('content' in document.createElement('template')) {
        //Grab the template's content and assign it to a variable so we only have the gut of the template
        var widgetContent = document.querySelector('#panel-template').content //('#panel-template').get(1).setAttribute('id', widget.WidgetCode);
        widgetContent.querySelector('#chart').setAttribute('id', widget.WidgetCode);

        //get the overlay toolbar
        var widgetOverlay = widgetContent.querySelector('.overlayed');
        widgetOverlay.setAttribute('data-render', widget.WidgetCode);
        widgetOverlay.setAttribute('data-chartType', widget.chartType);
        widgetOverlay.setAttribute('data-devID', widget.deviceID);
        widgetOverlay.setAttribute('data-metricType', widget.metricType);
        widgetOverlay.setAttribute('data-title', widget.WidgetName);

        var el = document.importNode(widgetContent, true);
        alert(el);   
    }
}

Answer 1

Если все, что вам нужно, это HTML в виде строки, вы можете получить это просто обычным .innerHTML; как это:

document.querySelector("template").innerHTML

Если вы вместо этого хотите textContentВы можете получить это от .content.textContent; как это:

document.querySelector("template").content.textContent

Если вы хотите на самом деле перебрать template дочерние узлы или многое другое со своим содержимым, вы должны использовать это .content свойство, которое возвращает DocumentFragment.

Из того, что у вас есть children, firstElementChild, lastElementChild, childElementCount, а также find(), findAll(), querySelector(), querySelectorAll(), getElementById; по крайней мере, в конце концов - кроме query* методы и getElementById()Я не уверен, что IE/Edge и Safari поддерживают большую его часть (около 2015-10). И я думаю, что никто еще не поддерживает find()/findAll(),