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.

Answer 1

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);