Nrthugu

I have a XML and XSL file in client and want to transform it to a HTMLElement so that I can append to my current element

But the result is far from what I expected. Every seems fine except the <td> and <tr> tags is excluded in the HtmlElement result

My XML file

<?xml version="1.0" encoding="UTF-8"?>

<ns1:Courses xmlns:ns1="www.Course.com">

    <ns1:Course xmlns:ns1="www.Course.com">

        <ns1:Id>2153</ns1:Id>

        <ns1:Name>7 bước làm sao tận hưởng một chuyến du lịch nước ngoài với chi phí thấp</ns1:Name>

        <ns1:Author>Hoàng Lê Giang</ns1:Author>

        <ns1:AuthorImageURL>

            d1nzpkv5wwh1xf.cloudfront.net/320/k-57b67d6f60af25054a055b25/20170928-gianghl_2809/gianghl01.jpg

        </ns1:AuthorImageURL>

        <ns1:Rating>0.0</ns1:Rating>

        <ns1:RatingNumber>0</ns1:RatingNumber>

        <ns1:Cost>599000.0</ns1:Cost>

    </ns1:Course>

My XSL file

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

    <xsl:output method="html" encoding="UTF-8" indent="yes" media-type="text/html"/>

    <xsl:template match="/">



        <xsl:for-each select="//*[local-name()='Course']">

            <tr>

                <td class="col1">

                    <div class="course_name">

                        <a href="{*[local-name()='SourceURL']}">

                            <xsl:value-of select="*[local-name()='Name']"/>

                        </a>



                    </div>

                    <div class="course_small_detail">



                        <img class="img_author_small"

                             src="{*[local-name()='AuthorImageURL']}"/>

                        <span class="author_name">

                            <xsl:value-of select="*[local-name()='Author']"/>

                        </span>



                    </div>





                </td>



                <td class="col2">

                    <xsl:value-of select="*[local-name()='Cost']"/>

                </td>

                <td class="col3">

                    <xsl:value-of select="*[local-name()='Rating']"/>

                </td>

            </tr>

        </xsl:for-each>

</xsl:template>



</xsl:stylesheet>

My javascript code that used to transform and append result

var xmlDoc = xmlHttp.responseXML;

            var xslDoc = xslHttp.responseXML;



            xsltProcessor = new XSLTProcessor();

            xsltProcessor.importStylesheet(xslDoc);



            //used to add to html document

            var resultDocument = xsltProcessor.transformToFragment(xmlDoc, document);

            console.log(resultDocument);

            document.getElementById("xmlResult").appendChild(resultDocument);

My html result render

 <table class="table_result">

                    <thead>

                    <tr>

                        <th>header1 </th>



                        <th>header2 </th>

                        <th>header3 </th>

                    </tr>

                    </thead>

                    <tbody id="xmlResult">

                    </tbody>

</table>

I believe this is because of the XSLTProcessor that I use to transform, because I tried to transform it with my IDE's XSLT tool, and the result is perfectly correct

With current versions of Firefox, Chrome and Edge on Windows 10 1803 it works for me to have XSLT return a fragment with XHTML tr elements to then be inserted into the hosting HTML document and a tbody:

var domParser = new DOMParser();



var xmlString = `<root>

  <item>

    <value>foo 1</value>

    <value>foo 2</value>

    <value>foo 3</value>

  </item>

  <item>    

    <value>bar 1</value>

    <value>bar 2</value>

    <value>bar 3</value>

  </item>

</root>`;



var xslString = `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns="http://www.w3.org/1999/xhtml">

  <xsl:output method="xml" indent="yes"/>

  

  <xsl:template match="item">

    <tr>

      <xsl:apply-templates/>

   </tr>

 </xsl:template>

 

 <xsl:template match="value">

   <td>

     <xsl:apply-templates/>

   </td>

 </xsl:template>

 

</xsl:stylesheet>`;



var xmlInputDoc = domParser.parseFromString(xmlString, 'application/xml');



var xsltDoc = domParser.parseFromString(xslString, 'application/xml');



var xsltProc = new XSLTProcessor();

xsltProc.importStylesheet(xsltDoc);



var fragment = xsltProc.transformToFragment(xmlInputDoc, document);



console.log(fragment);



var table = document.getElementById('table1');



var tBody = document.getElementById('xmlResult');



tBody.appendChild(fragment);

<table id="table1" class="table_result">

                    <thead>

                    <tr>

                        <th>header1 </th>



                        <th>header2 </th>

                        <th>header3 </th>

                    </tr>

                    </thead>

                    <tbody id="xmlResult">

                    </tbody>

</table>