d3.js + dynamic HTML - first data point not processed & .append appends to the wrong place

d3.js + dynamic HTML - first data point not processed & .append appends to
the wrong place

I have trying to build a more dynamic page where the content is
added/removed as needed. To do this I dynamically add a child div to an
existing div and put the content in there. When I need to remove the
content I can just remove the child div.
This works great for everything, except d3.js & specifically the .enter()
method. When I do not use the .enter() method everything works correctly,
however when I do use .enter() two issues suddenly appear:
The first data point is dropped. In other words it does not appear in the
output.
The .append() method appends the rest of the data points to the HTML - so
after the closing tag of the body element & not in the dynamically created
element.
What could the cause be or the solution to allowing this to work with d3 &
dynamically created divs?
From http://jsfiddle.net/TJNCK/1/
var area = document.querySelector("#reportArea");
area.innerHTML = "";
var reportPlacement = document.createElement("div");
reportPlacement.id = "reportPlace";
area.appendChild(reportPlacement);
var report = d3.select("#reportPlace");
report.data([1, 2, 3])
.enter()
.append("div")
.text(String);