title: Why is my XSL outputting siblings as children of an empty element?
body: <p>Given the following XML:</p>
  
  <pre><code>    &lt;text&gt;
          &lt;h6&gt;Title&lt;/h6&gt;
          &lt;p&gt;Text is right here&lt;/p&gt;
          &lt;h6&gt;Title&lt;/h6&gt;
          &lt;p&gt;Text is right here&lt;/p&gt;
          &lt;pagebreak orientation="portrait@1col" /&gt;
          &lt;h2&gt;This is an H2 Title&lt;/h2&gt;
          &lt;figure-gallery&gt;
              &lt;figure&gt;
                  &lt;figure-headline&gt;Headline&lt;/figure-headline&gt;
                  &lt;figure-asset&gt;Image tag to display image&lt;/figure-asset&gt;
                  &lt;figure-caption&gt;Caption of the image&lt;/figure-caption&gt;
              &lt;/figure&gt;
              &lt;figure&gt;
                  &lt;figure-headline&gt;Headline&lt;/figure-headline&gt;
                  &lt;figure-asset&gt;Image tag to display image&lt;/figure-asset&gt;
                  &lt;figure-caption&gt;Caption of the image&lt;/figure-caption&gt;
              &lt;/figure&gt;
          &lt;/figure-gallery&gt;
          &lt;h1&gt;This is an H1 title&lt;/h1&gt;
      &lt;/text&gt;
  </code></pre>
  
  <p>And the following XSL:</p>
  
  <pre><code>&lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xalan="http://xml.apache.org/xalan" exclude-result-prefixes="xalan"&gt;
  
  
  &lt;xsl:template match="@*|node()"&gt;
      &lt;xsl:copy&gt;
          &lt;xsl:apply-templates select="@*|node()"/&gt;
      &lt;/xsl:copy&gt;
  &lt;/xsl:template&gt;
  
  &lt;xsl:template match="pagebreak[1]"&gt;
      &lt;div id="empty-html-container" /&gt;
  &lt;/xsl:template&gt;
  
  
  &lt;xsl:template match="h6"&gt;
      &lt;div class="Title"&gt;
          &lt;xsl:apply-templates select="@*|node()"/&gt;
      &lt;/div&gt;
  &lt;/xsl:template&gt;
  
  &lt;xsl:template match="p"&gt;
      &lt;div class="Text"&gt;
          &lt;xsl:apply-templates select="@*|node()"/&gt;
      &lt;/div&gt;
  &lt;/xsl:template&gt;
  
  &lt;xsl:template match="figure-asset"&gt;
      &lt;xsl:apply-templates select="@*|node()"/&gt;
  &lt;/xsl:template&gt;
  
  &lt;xsl:template match="figure"&gt;
      &lt;div&gt;
          &lt;header&gt;
              &lt;xsl:copy-of select="figure-headline/p/node()"/&gt;
          &lt;/header&gt;
          &lt;section&gt;
              &lt;xsl:apply-templates select="figure-asset"/&gt;
          &lt;/section&gt;
          &lt;footer&gt;
              &lt;xsl:value-of select="figure-caption"/&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/xsl:template&gt;
  
  &lt;xsl:template match="figure-gallery"&gt;
      &lt;div class="figure-gallery"&gt;
          &lt;xsl:apply-templates/&gt;
      &lt;/div&gt;
  &lt;/xsl:template&gt;
  </code></pre>
  
  <p></p>
  
  <p>Why is the output coming out like this (sibling elements after the pagebreak are children of the pagebreak template output)...</p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="Title"&gt;Title&lt;/div&gt;
      &lt;div class="BulletText"&gt;Text is right here&lt;/div&gt;
      &lt;div class="BulletTitle"&gt;Title&lt;/div&gt;
      &lt;div class="BulletText"&gt;Text is right here&lt;/div&gt;
      &lt;div class="BulletTitle"&gt;Title&lt;/div&gt;
      &lt;div class="BulletText"&gt;Text is right here&lt;/div&gt;
      &lt;div id="empty-html-container"&gt;
          &lt;h2&gt;This is an H2 Title&lt;/h2&gt;
          &lt;div class="figure-gallery"&gt;
              &lt;div&gt;
                  &lt;header&gt;Headline&lt;/header&gt;
                  &lt;section&gt;Image tag to display image&lt;/section&gt;
                  &lt;footer&gt;Caption of the image&lt;/footer&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;header&gt;Headline&lt;/header&gt;
                  &lt;section&gt;Image tag to display image&lt;/section&gt;
                  &lt;footer&gt;Caption of the image&lt;/footer&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;h1&gt;This is an H1 title&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>...instead of coming out like this (sibling elements after the pagebreak remain sibiling elements after the pagebreak):</p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="Title"&gt;Title&lt;/div&gt;
      &lt;div class="BulletText"&gt;Text is right here&lt;/div&gt;
      &lt;div class="BulletTitle"&gt;Title&lt;/div&gt;
      &lt;div class="BulletText"&gt;Text is right here&lt;/div&gt;
      &lt;div class="BulletTitle"&gt;Title&lt;/div&gt;
      &lt;div class="BulletText"&gt;Text is right here&lt;/div&gt;
      &lt;div id="empty-html-container"&gt;&lt;/div&gt;
      &lt;h2&gt;This is an H2 Title&lt;/h2&gt;
      &lt;div class="figure-gallery"&gt;
          &lt;div&gt;
              &lt;header&gt;Headline&lt;/header&gt;
              &lt;section&gt;Image tag to display image&lt;/section&gt;
              &lt;footer&gt;Caption of the image&lt;/footer&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;header&gt;Headline&lt;/header&gt;
              &lt;section&gt;Image tag to display image&lt;/section&gt;
              &lt;footer&gt;Caption of the image&lt;/footer&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;h1&gt;This is an H1 title&lt;/h1&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The empty element is to allow JavaScript do some work after the browser loads the page.</p>
  
  <p>One curious thing, when I put text inside the "div" in the output, then it will work as expected, but if I leave it empty, then the siblings become children.</p>
  
  <p>Right now, I have a "br" tag because it doesn't show up and it solves my problem, but it adds a line return I do not want because it messes with my design.</p>
  
  <p>Thanks in advance for your help.</p>