javascript - 将模板标签的内容作为字符串返回

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()。不确定 Safari 是否支持其中的大部分(大约 2015-10)。而且我认为还没有人支持 find()/findAll()。