LFC-$27.lzx

<canvas height="300">
   <simplelayout axis="y"/>

   <text width="300" height="250" bgcolor="silver" multiline="true" name="display"/>
   <button>Make some data
     <attribute name="currentstep" value="0"/>
 
     <handler name="onclick">
       
       switch (this.currentstep++) {
         case 0:
           this.n = new lz.DataElement('numbers');
           this.setAttribute('text', 'Add some children');
           break;
         case 1:
           for (var i = 1; i < 11; i++) {
             this.n.appendChild(new lz.DataElement('number', {value : i}));
           }
           this.setAttribute('text', 'Add linebreaks');
           break;
         case 2:
           var dp = new lz.datapointer();
           dp.setPointer(this.n.getFirstChild());
           do {
             dp.p.parentNode.insertBefore(new lz.DataText('\n'), dp.p);
           } while (dp.selectNext())
           dp.p.parentNode.appendChild(new lz.DataText('\n'));
           this.setAttribute('visible', false);
           break;
       }
       canvas.display.setAttribute('text', canvas.display.escapeText(n.serialize()));
       
     </handler>
   </button>
 </canvas>