selection.insert()

selection.insert(type, before)

If the specified type is a string, inserts a new element of this type (tag name) before the element matching the specified before selector for each selected element. For example, a before selector :first-child will prepend nodes before the first child. Both type and before may instead be specified as functions which are evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element. The type function should return an element to be inserted; the before function should return the child element before which the element should be inserted. For example, to insert a DIV element to each paragraph:

d3.selectAll("p").insert("div");

This is equivalent to:

d3.selectAll("p").insert(function() {
  return document.createElement("div");
});

Which is equivalent to:

d3.selectAll("p").select(function() {
  return this.insertBefore(document.createElement("div"), null);
});

In both cases, this method returns a new selection containing the appended elements. Each new element inherits the data of the current elements, if any, in the same manner as selection.select.

The specified name may have a namespace prefix, such as svg:text to specify a text attribute in the SVG namespace. See namespaces for the map of supported namespaces; additional namespaces can be registered by adding to the map. If no namespace is specified, the namespace will be inherited from the parent element; or, if the name is one of the known prefixes, the corresponding namespace will be used (for example, svg implies svg:svg).