selection.append()

selection.append(type)

If the specified type is a string, appends a new element of this type (tag name) as the last child of each selected element, or the next following sibling in the update selection if this is an enter selection. (The enter behavior allows you to insert elements into the DOM in an order consistent with bound data; however, the slower selection.order may still be required if updating elements change order.) Otherwise, the type may be a function which is 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. This function should return an element to be appended. (The function typically creates a new element, but it may instead return an existing element.) For example, to append a DIV element to each paragraph:

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

This is equivalent to:

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

Which is equivalent to:

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

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).