31:T932,md` [#](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_insert) *selection*.**insert**(*type*[, *before*]) [<>](https://github.com/d3/d3-selection/blob/master/src/selection/insert.js) If the specified *type* is a string, inserts a new element of this type (tag name) before the first element matching the specified *before* selector for each selected element. For example, a *before* selector \`:first-child\` will prepend nodes before the first child. If *before* is not specified, it defaults to null. (To append elements in an order consistent with [bound data](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#joining-data), use [*selection*.append](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_append).) 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 (*nodes*[*i*]). 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 append a DIV element to each paragraph: \`\`\`js d3.selectAll("p").insert("div"); \`\`\` This is equivalent to: \`\`\`js d3.selectAll("p").insert(() => document.createElement("div")); \`\`\` Which is equivalent to: \`\`\`js 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](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#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](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#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\`).\ `32:[] 2f:{"title":"d3.selection.insert","cells":[{"id":0,"value":"md`# d3.selection.insert`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"c = html`\n

\n \n \n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3.select(c).select(\"p\").insert(\"div\", () => document.getElementById(\"a2\")); // add a div before anchor with id \"a2\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"d3.select(c).select(\"div\").attr(\"id\", \"d1\") // set the div with id \"d1\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"d3.select(c).select(\"p\").insert(\"a\"); // insert/append an anchor to the last child of p","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"d3.select(c).select(\"#sub2\").insert(() => document.createElement(\"div\"));","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"d3.select(c).select(\"#sub2\").select(\"div\").attr(\"id\", \"d2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"d3.select(\"#sub2\").select(function() {\n return this.insertBefore(document.createElement(\"a\"), document.getElementById(\"d2\")); // added an anchor before div id=\"d2\"\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {d3} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}