Create DOM element without appending it?

Is it possible to create a DOM element without appending it? In building an SVG tree I want to create a <g> element, add a bunch of children to it, then append the entire tree at once. I believe this is more efficient than calling append() right after select().data().enter() which would cause the browser to do more redraws than necessary.

[mbostock]

D3 5.0 added d3.create for creating a selection from a new detached DOM element. So you could say:

function createSvg() {
  const svg = d3.create("svg");
  // Add stuff to the SVG element here.
  return svg.node();
}

document.body.appendChild(createSvg());

[mbostock]

You haven’t set a width and height attribute on your svg element, and you haven’t specified the appropriate namespace in conjunction with document.createElementNS when creating the svg element. Another strategy you could consider is to remove the element from the DOM immediately after creating it:

var svg = d3.select("body").append("svg")
    .remove()
    .attr("width", 400)
    .attr("height", 400);

svg.append("circle")
    .attr("r", 200);

document.body.appendChild(svg.node());