title: D3.js .append( ) on existing <div> and hierarchy
body: <p>According to my code, it looks like key_square and key_line divisions should be sibling elements to key_row since I am appending them to the division "key", but they are descendants of key_row.</p>
  
  <p>Could someone explain this to me? </p>
  
  <p>Thank you,</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div id="timeseries"&gt; 
      &lt;/div&gt;
  
      &lt;div id="key"&gt; 
      &lt;/div&gt;
  
      &lt;script&gt;
         var key = d3.select("#key")
             .selectAll("div")
             .data(data)
             .enter()
             .append("div")
                 .attr("class","key_row")
                 .attr("id",function (d){ return d.line_id;})
  
  //add square
              key.append("div")
                 .attr("class", "key_square")
             .style("background-color","#C8DAF8")
  
  //d3.select("#key")
          key.append("div")
              .attr("class","key_id")
              .attr("id","key_line")
              .style("background-color","#E9F0FC")
              .text(function (d) { return d.line_id;});
  </code></pre>