title: D3JS: appending simple nested HTML in a single command
body: <p>Consider this simple block of HTML:</p>
  
  <pre><code>&lt;div id="somediv"&gt;
      &lt;btn id="somebutton"&gt;Abc&lt;/btn&gt;
      &lt;div class="nested"&gt;
          &lt;span id="span1"&gt;Blah blah blah&lt;/span&gt;
          &lt;span id="span2"&gt;Bleh bleh bleh&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to recreate it, dynamically, using D3JS.</p>
  
  <p>This works fine for this purpose:</p>
  
  <pre><code>(function() {
  
      var somediv = d3.select( 'body' ).append( 'div' ).attr( 'id', 'somediv' );
  
      somediv.append( 'btn' )
              .attr( 'id', 'somebutton' )
              .html( 'Abc' );
  
      var nested = somediv.append( 'div' )
          .attr( 'class', 'nested' );
  
      nested.append( 'span' ).attr( 'id', 'span1' ).html( 'Blah blah blah' );
      nested.append( 'span' ).attr( 'id', 'span2' ).html( 'Bleh bleh bleh' );
  
  })();
  </code></pre>
  
  <p>…however, it's very verbose, with four commands and two temporary variables… Most of all, it's not easy to read – don't like it.</p>
  
  <p><strong>I'm looking for a way to do it in a single command.</strong></p>
  
  <p>So far, I have this:</p>
  
  <pre><code>    d3.select( 'body' )
          .append( 'div' )
              .attr( 'id', 'somediv' )
          .append( 'btn' )
              .attr( 'id', 'somebutton' )
              .html( 'Abc' )
          .append( 'div' )
              .attr( 'class', 'nested' )
              .append( 'span' ).attr( 'id', 'span1' ).html( 'Blah blah blah' )
              .append( 'span' ).attr( 'id', 'span2' ).html( 'Bleh bleh bleh' );
  </code></pre>
  
  <p>…however (as is to be expected), this results in constant nesting (i.e.: span2 is in span1, which is in div which is in btn which is in #somediv.)</p>
  
  <p>Is there something in the D3 JS API that will let me return (to) the parent element to continue appending from it?</p>