title: How to view xsl output in browsers?
body: <p>everyone!</p>
  
  <p>I'm building a website based on some xml data files, so I chose to work with XSLT to bind the stylesheets in browsers.</p>
  
  <p>It works quite good at first, but lately, as the templates grow more complicated, something strange happened. </p>
  
  <p>I use the "copy-of" element to copy the data into the stylesheets. Here's the code:</p>
  
  <pre><code>&lt;div class="section1"&gt;
      &lt;xsl:copy-of select="article/bodydata/*" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, basically, I'm copying all child elements of the "bodydata" node into &lt;div /&gt;.</p>
  
  <p>But it doesn't work. For example, I've got an &lt;img /&gt; 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.</p>
  
  <p>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?</p>
  
  <p>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!</p>
  
  <p>UPDATE</p>
  
  <p>To illustrate the problem, I wrote a little sample.</p>
  
  <p>First, I created a sample xml data file:</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='utf-8'?&gt;
  &lt;?xml-stylesheet type="text/xsl" href="article.xsl"?&gt;
  &lt;article&gt;
      &lt;bodydata&gt;
          &lt;center&gt;
              &lt;img alt="sample" src="http://www.google.com/logos/classicplus.png" /&gt;
          &lt;/center&gt;
          &lt;p&gt;
            &lt;data class="tts_data"&gt;
            this is the paragraph.
            &lt;/data&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;data class="tts_data"&gt;this is the second paragraph&lt;/data&gt;
            &lt;data class="tts_data"&gt;more data&lt;/data&gt;
            &lt;data class="tts_data"&gt;...&lt;/data&gt;
          &lt;/p&gt;
      &lt;/bodydata&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
      &lt;xsl:template match="/"&gt;
        &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
          &lt;head&gt;
            &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
            &lt;meta name="robots" content="noindex" /&gt;
          &lt;/head&gt;
          &lt;body&gt;
            &lt;article&gt;
             &lt;header&gt;
                    header of the article
                 &lt;/header&gt;
                 &lt;section&gt;
                    &lt;xsl:copy-of select="article/bodydata/*" /&gt;
             &lt;/section&gt;
        &lt;/article&gt;
            &lt;footer&gt;
            footer part of the page
            &lt;/footer&gt;
          &lt;/body&gt;
       &lt;/html&gt;
      &lt;/xsl:template&gt;
  &lt;/xsl:stylesheet&gt;
  </code></pre>
  
  <p>And the result is like this:
  <img src="https://i.stack.imgur.com/uuenI.png" alt="the xslt result">
  The img element just disappears.</p>
  
  <p>And next, I copied the bodydata elements into the section part, and formed a new html file.</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;meta name="robots" content="noindex" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;article&gt;
      &lt;header&gt;
       header of the article
      &lt;/header&gt;
      &lt;section&gt;
        &lt;center&gt;
          &lt;img alt="sample" src="http://www.google.com/logos/classicplus.png" /&gt;
        &lt;/center&gt;
        &lt;p&gt;
          &lt;data class="tts_data"&gt;
          this is the paragraph.
          &lt;/data&gt;
        &lt;/p&gt;
        &lt;p&gt;
          &lt;data class="tts_data"&gt;
          this is the second paragraph, 
          &lt;/data&gt;
          &lt;data class="tts_data"&gt;
          more data
          &lt;/data&gt;
          &lt;data class="tts_data"&gt;...&lt;/data&gt;
        &lt;/p&gt;
    &lt;/section&gt;
      &lt;/article&gt;
      &lt;footer&gt;
      footer part of the page
      &lt;/footer&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the result here is:
  <img src="https://i.stack.imgur.com/gRJIf.png" alt="the result of the html file">
  And the image appears.</p>
  
  <p>So I'm wondering what's wrong here.</p>