title: Adding sub element based on data using D3
body: <p>I have a following html structure</p>
  
  <pre><code>&lt;thead class="table-header"&gt;   
    &lt;tr&gt;
      &lt;th&gt;&lt;div class="th-inner"&gt;a&lt;/th&gt;
      &lt;th&gt;&lt;div class="th-inner"&gt;b&lt;/th&gt;
      &lt;th&gt;&lt;div class="th-inner"&gt;c&lt;/th&gt;   
    &lt;/tr&gt; 
  &lt;/thead&gt;
  </code></pre>
  
  <p>And I want to add div with class th-but right next to div th-inner based on simple data array with three elements (mydata=['x', 'y', 'z']). </p>
  
  <p>I tried following but it doesn't seem to work:</p>
  
  <pre><code>cells = d3.select('root').select('thead.table-header tr')
     .selectAll('div.th-inner').data(mydata)
     .selectAll('div.th-but').data(function(d,i){return d;});
  
  cells.enter().append('div').classed('th-but', true);
  </code></pre>
  
  <p>Am I missing something? Am I going in right direction with solution?</p>