將模板標籤的內容返回爲字符串

我想知道是否有方法獲取模板標籤內的元素內容並將其作爲字符串返回？目前，它似乎正在沿着[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); 
    } 
}

來源

2015-09-28 Johnathon64

如果你想要的是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()。

來源

2015-09-29 00:45:17 sideshowbarker

我希望能夠更改模板中HTML的內容，然後將HTML作爲字符串返回，我可以使用innerHTML屬性來實現嗎？ – Johnathon64

當然 - 如果你嘗試用'document.querySelector（「template」）。innerHTML =「

Some new content

」'設置它，然後用'var foo = document.querySelector（「template」）來獲取它。innerHTML'我想你會發現它可以像你期望的那樣工作。 – sideshowbarker

將模板標籤的內容返回爲字符串

回答

相關問題