将 xml 文档元素添加到 html 表答案

【问题标题】：Add xml document element to html table将 xml 文档元素添加到 html 表
【发布时间】：2015-10-08 05:32:45
【问题描述】：

我在浏览器中使用 xml+xsl 并在 javascript 中处理异步页面，但无法将 xml 处理的 tr 元素添加到表 tbody 中，因为行元素看起来像纯文本.我发现一些技巧可以通过复制 innerHTML（convertChild 函数）来修复它：

var xmlDom = pageProcessor().transformToDocument(xml);
var root = xmlDom.documentElement;
var tbody = document.getElementById('table-content');
for (var i = 0; i < root.childElementCount; i++) {
    tbody.appendChild(convertChild(root.children[i]));
}

function convertChild(source) {
    var tmp1 = document.createElement('tbody');
    tmp1.appendChild(source);
    var tmp2 = document.createElement('tbody');
    tmp2.innerHTML = tmp1.innerHTML;
    return tmp2.firstChild;
}

pageProcessor 函数返回带有导入的 xsl 样式表的 XSLTProcessor。 xml 变量是 Sarissa 库 dom 文档。在调试器中 root.children[i] 看起来是有效的。

如何摆脱这种 hack 并正确地将元素附加到表中？

更新：

我使用的是 Firefox 37.0.2

xml 看起来像这样：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<rows>
<row><item>key44</item><item>val44</item></row>
<row><item>key45</item><item>val45</item></row>
...
</rows>

我 console.log 将 xslt 处理的每个 html 元素从 row item 记录到 tr td

已解决：

谢谢你，马丁·霍南！

transformToFragment(sourceDoc, ownerDoc)

有效！

请发表答案。

【问题讨论】：

您使用哪种浏览器？ XML 看起来如何，您是否确保使用 XSLT 创建 HTML 结果元素，方法是确保您有一个带有 <html><body>...</body></html> 和 <xsl:output method="html"/> 的完整 HTML 文档，或者确保它是一个带有 xmlns="http://www.w3.org/1999/xhtml" 的 XHTML 片段? Sarissa 不提供像 Mozilla 的 transformToFragment 这样的功能吗？
根据dev.abiss.gr/sarissa/jsdoc/symbols/… 有一个方法transformToFragment(sourceDoc, ownerDoc) 所以我建议尝试var resultDoc = pageProcessor.transformToFragment(xml, document); 然后希望你能够将appendChild 节点从resultDocument 变成tbody 后代您的 HTML document.
在 Firefox 中，tr 元素只是一个 HTML tr 元素，如果它是在 HTML 文档或文档片段中创建的，或者如果它是在 XHTML 命名空间 http://www.w3.org/1999/xhtml 中创建的。否则，它是一个未知的 XML 元素，恰好有一个本地名称 tr。

标签： javascript html xslt sarissa

【解决方案1】：

我认为，据我了解，在 Mozilla 浏览器或 Chrome 等浏览器中，浏览器本身提供了 XSLTProcessor 的实现，与 Sarissa 一起使用的对象是浏览器的本机实现。因此，我建议，如果 Firefox 是您的唯一目标浏览器，则只需使用 transformToFragment，如下所示：

var resultFragment = pageProcessor().transformToFragment(xml, document);
document.getElementById('table-content').appendChild(resultFragment);

【讨论】：