title: DOMDocument - how to replace nested elements
body: <p>I've this html fragment:</p>
  
  <pre><code>&lt;font color="#ff0000"&gt;Lorem &lt;font size="4"&gt;ipsum dolor&lt;/font&gt; sit amet&lt;/font&gt;
  </code></pre>
  
  <p>and i want to replace each <code>font</code> tag with a <code>span</code>, using DOMDocument.
  That's my function atm:</p>
  
  <pre><code>$fonts = $xPath-&gt;query('//font');
  foreach($fonts as $font){
      $style = '';
      $newFont = $dom-&gt;createElement('span',$font-&gt;nodeValue);
      if($font-&gt;hasAttribute('size')){
          $size = $font-&gt;getAttribute('size');
          $style.='font-size:'.round($size/2,1).'em; ';
      }
      if($font-&gt;hasAttribute('color')){
          $style.='color:'.$font-&gt;getAttribute('color').'; ';
      }
      if($style!='') $newFont-&gt;setAttribute('style',$style);
      $font-&gt;parentNode-&gt;replaceChild($newFont,$font);
  }
  </code></pre>
  
  <p>I expected this output:</p>
  
  <pre><code>&lt;span style="color:#ff0000; "&gt;Lorem &lt;span style="font-size:2em;"&gt;ipsum etc..
  </code></pre>
  
  <p>But i get:</p>
  
  <pre><code>&lt;span style="color:#ff0000; "&gt;Lorem ipsum dolor sit amet&lt;/span&gt;
  </code></pre>
  
  <p>Why? </p>
  
  <hr>
  
  <p>I guess it happens because <code>$font-&gt;parentNode-&gt;replaceChild($newFont,$font);</code> is somehow replacing the outer span with just its text value... Or maybe this query <code>$xPath-&gt;query('//font')</code> is wrong.  I'ld love an experienced suggestion... thanks</p>