So, basically, I'm copying all child elements of the "bodydata" node into <div />.
But it doesn't work. For example, I've got an <img /> element in the bodydata, and that image does not appear if I visit the xml file in the browser. On the other hand, if I copy the "bodydata" elements by hand into that div, and make the .xsl file into a .html file, that image does show up.
So, here's my question, can I view the combined output of the xml data and the xsl data in browsers? Do I need any extension or what?
And any suggestions on what might be wrong? I'm quite new to xslt, so it seems that I misunderstood what XSLT really does. Thanks!
UPDATE
To illustrate the problem, I wrote a little sample.
First, I created a sample xml data file:
<?xml version='1.0' encoding='utf-8'?>
<?xml-stylesheet type="text/xsl" href="article.xsl"?>
<article>
<bodydata>
<center>
<img alt="sample" src="http://www.google.com/logos/classicplus.png" />
</center>
<p>
<data class="tts_data">
this is the paragraph.
</data>
</p>
<p>
<data class="tts_data">this is the second paragraph</data>
<data class="tts_data">more data</data>
<data class="tts_data">...</data>
</p>
</bodydata>
</article>
So, you can see, all nodes in "bodydata" element are html elements that needs to be show on webpage. In order to display that, I created a sample xsl file.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex" />
</head>
<body>
<article>
<header>
header of the article
</header>
<section>
<xsl:copy-of select="article/bodydata/*" />
</section>
</article>
<footer>
footer part of the page
</footer>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
And the result is like this:
The img element just disappears.
And next, I copied the bodydata elements into the section part, and formed a new html file.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex" />
</head>
<body>
<article>
<header>
header of the article
</header>
<section>
<center>
<img alt="sample" src="http://www.google.com/logos/classicplus.png" />
</center>
<p>
<data class="tts_data">
this is the paragraph.
</data>
</p>
<p>
<data class="tts_data">
this is the second paragraph,
</data>
<data class="tts_data">
more data
</data>
<data class="tts_data">...</data>
</p>
</section>
</article>
<footer>
footer part of the page
</footer>
</body>
</html>
And the result here is:
And the image appears.
So I'm wondering what's wrong here.
解决方案
Consider to show us minimal but complete samples to demonstrate the problem, otherwise it is hard to tell. xsl:copy-of sounds like the right approach to me, assuming the bodydata element has HTML elements as the child elements. As for looking at the transformation result, these days most browsers come with a developer tool (or you can install one like Firebug), then you can hit F12 to see the DOM tree of the document in the browser to inspect the result. As for an element copied to the result tree not showing up, in general it could be a namespace problem (i.e. copying HTML namespace-less img to XHTML result document). So show us more details as to which browser(s) you have tried, which output method your XSLT has, which version of HTML you are trying to create as the transformation result (i.e. HTML 4.01, XHTML 1.0, HTML5).
[edit]
With your current samples where you use a root element named html in the XHTML 1.0 namespace for the result tree, Firefox/Mozilla render your result as XML where namespaces matter. When you copy the img element from the input XML you copy an img element in no namespace into an XHTML document, so due to the lack of the right namespace on the img element the browser does not recognize the img element as an XHTML img element. So you either need to change your input XML to use the XHTML namespace for the fragments of (X)HTML you want to copy, or, in my view these days with the focus being on HTML 4 or HTML5 with no namespaces, you simply use that version of HTML in the result tree of the stylesheet i.e. you don't use a namespace for the document's root element, you set <xsl:output method="html" version="4.01"/> or <xsl:output method="html" version="5.0"/>. That way the problem should go away.
As an alternative, if you really want the result to be XHTML but you want to copy an XML img element in no namespace into the XHTML result tree, the proper way would be not to use copy-of, instead you would use <xsl:apply-templates/> and then you would need to write templates that transform the elements you need into the XHTML namespace e.g.
In my view with all browser vendors focusing on HTML5 without namespaces I would however suggest not to transform to XHTML and instead target HTML 4.01 or HTML5 without namespaces, you get better cross-browser interoperability with XSLT 1.0 in the browser.
