有没有办法从通用的 HTML 片段创建文档片段？

Question

我正在开发一个应用程序，它使用一些客户端模板来呈现数据，并且大多数 javascript 模板引擎返回一个带有标记的简单字符串，并且由开发人员将该字符串插入到 DOM 中。

我四处搜索，看到一群人建议使用空 div，将其 innerHTML 设置为新字符串，然后像这样遍历该 div 的子节点

var parsedTemplate = 'something returned by template engine';
var tempDiv = document.createElement('div'), childNode;
var documentFragment = document.createDocumentFragment;
tempDiv.innerHTML = parsedTemplate;
while ( childNode = tempDiv.firstChild ) {
    documentFragment.appendChild(childNode);
}

而 TADA，documentFragment 现在包含已解析的模板。但是，如果我的模板恰好是 tr，则在其周围添加 div 不会实现预期的行为，因为它会将 td 的内容添加到行内。

有人知道解决这个问题的好方法吗？现在，我正在检查将插入已解析模板的节点，并根据其标签名称创建一个元素。我什至不确定还有其他方法可以做到这一点。

在搜索时，我在 w3 邮件列表中发现了this discussion，但遗憾的是没有有用的解决方案。

Answer 1

您可以使用 DOMParser 作为 XHTML 来避免 HTML “自动更正” DOM 喜欢执行：

var parser = new DOMParser(),
doc = parser.parseFromString('<tr><td>something returned </td><td>by template engine</td></tr>', "text/xml"),
documentFragment = document.createDocumentFragment() ;
documentFragment.appendChild( doc.documentElement );

//fragment populated, now view as HTML to verify fragment contains what's expected:
var temp=document.createElement('div');
temp.appendChild(documentFragment);
console.log(temp.outerHTML); 
    // shows: "<div><tr><td>something returned </td><td>by template engine</td></tr></div>"

这与使用带有临时 div 的天真 innerHTML 形成对比：

var temp=document.createElement('div');
temp.innerHTML='<tr><td>something returned </td><td>by template engine</td></tr>';
console.log(temp.outerHTML); 
// shows: '<div>something returned by template engine</div>' (bad)

通过将模板视为 XHTML/XML（确保其格式正确），我们可以改变 HTML 的正常规则。 DOMParser 的覆盖范围应该与对 documentFragment 的支持相关，但是在一些旧的 firefox 副本（个位数版本）上，您可能需要使用 importNode()。

作为一个可重用的函数：

function strToFrag(strHTML){
   var temp=document.createElement('template');
    if( temp.content ){
       temp.innerHTML=strHTML;
       return temp.content;
    }
    var parser = new DOMParser(),
    doc = parser.parseFromString(strHTML, "text/xml"),
    documentFragment = document.createDocumentFragment() ;
    documentFragment.appendChild( doc.documentElement );
    return documentFragment;
}