title: what's the best way for d3 to manipulate html?
body: <p>I'm using <a href="http://d3js.org/" rel="noreferrer"><strong>mbostock's awesome d3</strong></a> for <strong>simple html rendering</strong>, the simplest way I could think of, selecting an empty div and filling it with HTML.</p>
  
  <pre class="lang-js prettyprint-override"><code>d3.select($('#thediv')[0])
    .selectAll('p')
    .data(l).enter()
    .append('p')
    .html(function(d){return 'd3 ' + d;});
  </code></pre>
  
  <p>In <strong>Win7 Chrome,</strong> I noticed that, for large datasets, this seems to be <strong>very slow.</strong> (3.5 s for 20000 items)</p>
  
  <p>This example renders a very simple (though long) list: <a href="http://jsfiddle.net/truher/NQaVM/" rel="noreferrer">http://jsfiddle.net/truher/NQaVM/</a></p>
  
  <p>I tried two solutions, <strong>visibility toggling:</strong></p>
  
  <pre><code>$('#thediv').toggle()
  </code></pre>
  
  <p>and <strong>writing to a detached element:</strong></p>
  
  <pre><code>var p = $('&lt;div&gt;')
  d3.select(p[0])...
  $('#theparent').append(p)
  </code></pre>
  
  <p>The results were this:</p>
  
  <p><strong>Firefox:</strong> uniformly fast (600-700 ms)</p>
  
  <p><strong>Chrome:</strong> either toggling or detaching is fast (800 ms), otherwise very slow (3.5 s)</p>
  
  <p><strong>Internet Explorer:</strong> detaching is faster but still slow (1.8 s), otherwise very slow (3.2 s)</p>
  
  <p>My question is this: <strong>Is there a better solution?</strong></p>