title: Why are programmatically inserted SVG <tspan> elements not drawn, except with d3.js?
body: <p>Say I want to programmatically insert an additional <code>&lt;tspan&gt;</code> in the <code>&lt;text&gt;</code> element in the following SVG:</p>
  
  <pre><code>&lt;svg width="300" height="500"&gt;
      &lt;text x="50" y="100"&gt;
          &lt;tspan x="50"&gt;one&lt;/tspan&gt;
          &lt;tspan x="50" dy="20"&gt;two&lt;/tspan&gt;
          &lt;tspan x="50" dy="20"&gt;three&lt;/tspan&gt;
      &lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>This can be done with, among other things, pure JavaScript (<code>.appendChild</code>), jQuery (<code>.append</code>), and d3.js (<code>.append</code>).  However, although all three methods successfully insert the element, I can only seem to get it to <em>actually display</em> when it's inserted by d3.js:</p>
  
  <p>See reduced case in this fiddle: <a href="http://jsfiddle.net/2NLJY/" rel="noreferrer">http://jsfiddle.net/2NLJY/</a>.</p>
  
  <p>The behaviour is consistent across the browsers I've tested: Firefox, Chrome, and Safari (all OS X 10.8).</p>
  
  <p>What is going on here?</p>