Insert wrapping element

This recipe demonstrates the insertion of a wrapping element around multiple tags.

Rules 

<rules
  xmlns="http://namespaces.plone.org/diazo"
  xmlns:css="http://namespaces.plone.org/diazo/css"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  >
  <replace css:content-children="#content" css:theme-children="#content"/>
  <before css:theme-children="#content">
      <div id="wrapper">
        <xsl:apply-templates css:select="#title" mode="raw"/>
        <xsl:apply-templates css:select="#description" mode="raw"/>
      </div>
  </before>
  <drop css:content="#title"/>
  <drop css:content="#description"/>
</rules>

Theme 

<html>
  <body>
    <div id="content">
      <div id="wrapper">
        Title
        Description
      </div>
        More stuff
    </div>
  </body>
</html>

Content 

<div id="content">
    <h1 id="title"> Title </h1>
    <div id="description"> Description </div>
    <p> More stuff </p>
    <p> ... </p>
</div>

Output 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <div id="content">
      <div id="wrapper">
        <h1 id="title"> Title </h1>
        <div id="description"> Description </div>
      </div>



    <p> More stuff </p>
    <p> ... </p>
</div>
  </body>
</html>