title: d3.js - Understanding enter()
body: <p>I am trying out the following example:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="//unpkg.com/d3"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
         &lt;div class = "cities"&gt;
         &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;script&gt;
          cities = ['san francisco', 'new york', 'seattle']
  
          d3.select("div.cities")
          .data(cities)
          .enter()
          .append("div")
          .html(d=&gt;d)
  
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I was expecting this to add one div element corresponding to each city added inside the "cities" div element.
  But when I run this, I get the following:</p>
  
  <p><a href="https://i.stack.imgur.com/OmvAV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OmvAV.png" alt="enter image description here"></a></p>
  
  <p>Questions:</p>
  
  <ol>
  <li>Why are the new div elements getting added outside the "cities" div? How do I get them added inside "cities" div?</li>
  <li>Shouldnt there be 3 div elements? Why is div element for "san francisco" missing? </li>
  </ol>