Insert element in a tag on the fly (all in the "content" side)

Question

I need to modify on-the-fly the "content" side of a tag appending some text.

I have (on the content side) the classic portal-tabs:

<ul class="nav" id="portal-globalnav">
....
  <li id="portaltab-events" class="plain">
   <a href="http://localhost:8080/test3/events" title="Eventi del sito">Eventi</a>
  </li>
</ul>

I need to append (via diazo) on-the fly the content of another tag (#numbers) to obtain something like:

<ul class="nav" id="portal-globalnav">
....
   <li id="portaltab-events" class="plain">
    <a href="http://localhost:8080/test3/events" title="Eventi del sito">Eventi</a>
    <div id="#numbers">33</div>
   </li>
</ul>

How solve this issue? Thank's

Answer 1

A content replace containing a little XSL should do it.

<replace css:content="#portaltab-events a">
    <xsl:copy-of select="." />
    <xsl:copy-of select="//*[@id='numbers']" />
    <xsl:apply-templates />
</replace>

If you separately drop the #numbers div, you'll need to add mode="raw" to the apply-templates to prevent it from being dropped here.

Answer 2

You might see if this helps: http://docs.diazo.org/en/latest/recipes/modifying-text/index.html

Also, where does the #numbers div come from? If you append it to each LI tag, you'll have an invalid HTML (more than one element with the same ID)