Add xml document element to html table

Question

I using xml+xsl in browser and processing async pages in javascript, but can't add xml processed tr element to table tbody because row elements looks like plain text. I find some hack to fix it with copying innerHTML (convertChild function):

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 function returns XSLTProcessor with imported xsl stylesheet. xml variable is Sarissa library dom document. In debugger root.children[i] looks valid.

How to get rid of this hack and append elements to table correctly?

Update:

I using firefox 37.0.2

xml looks like this:

<?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>

I console.log each html element processed by xslt from row item into tr td

Solved:

Thank you, Martin Honnen!

transformToFragment(sourceDoc, ownerDoc)

works!

Please, post an answer.

Which browser(s) do you use? How does the XML look, are you making sure you create a HTML result elements with XSLT, either by making sure you have a complete HTML document with `...` and `` or by making sure it is an XHTML fragment with `xmlns="http://www.w3.org/1999/xhtml"`? Does Sarissa not provide a feature like Mozilla's `transformToFragment`? — Martin Honnen, Jul 18 '15 at 17:39
According to http://dev.abiss.gr/sarissa/jsdoc/symbols/XSLTProcessor.html#constructor there is a method `transformToFragment(sourceDoc, ownerDoc)` so I would suggest to try `var resultDoc = pageProcessor.transformToFragment(xml, document);` and then hopefully you are able to `appendChild` nodes from `resultDocument` into the `tbody` descendant of your HTML `document`. — Martin Honnen, Jul 18 '15 at 17:47
Well with Firefox an `tr` element is only an HTML `tr` element if it is created in a HTML document or document fragment or if it is created in the XHTML namespace `http://www.w3.org/1999/xhtml`. Otherwise it is an unknown XML element that happens to have a local name `tr`. — Martin Honnen, Jul 18 '15 at 18:08

Martin Honnen · Accepted Answer · 2015-07-19T09:00:20.150

I think, as far as I understand, in browsers like Mozilla browsers or like Chrome, where there is an implementation of XSLTProcessor provided by the browser itself, the object you use with Sarissa is the native implementation of the browser. So I would suggest, if Firefox is the only browser you target, to simply make use of transformToFragment as follows:

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

Add xml document element to html table

1 Answers1