title: How to append a text element with inline tspan children?
body: <p>Starting with a DOM that already contains something like</p>
  
  <pre><code>&lt;svg id="svg0" width="600" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>...I want to <em>programmatically</em> modify the element in <code>d3.select("#svg0")</code> so that I end up with</p>
  
  <pre><code>&lt;svg id="svg0" width="600" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;text x="20" y="20"&gt;
  Lorem ipsum 
  &lt;tspan style="alignment-baseline:text-before-edge"&gt;dolor&lt;/tspan&gt;
  sit amet&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>This is as far as I can get:</p>
  
  <pre><code>var $svg = d3.select("#svg0");
  $svg.append("text").text("Lorem ipsum ")
                     .attr({x:"20", y:"20"});
  </code></pre>
  
  <p>It looks as though the rest should be easy, but I've spent the last two hours trying all the "obvious" things to finish this without success.<sup>1</sup></p>
  
  <p>What does one have to do to finish the task described above?</p>
  
  <p><sub><sup>1</sup>I've tried far too many things to describe them all.  Suffice it to say that the <code>text</code> <em>method</em>, when used as a setter, wipes out whatever <code>textContent</code> the <code>text</code> <em>object</em> had before.  This means that, effectively, this method can be called only once, which precludes solutions relying on calling <code>.text(...)</code> a second time to add the " sit amet" fragment.)</sub></p>