D3.js Prepend (similar To JQuery Prepend)

I like the usage of append in D3, and I'm looking for prepend. Does this exist in D3?

Solution 1:

You can use

selection.insert(newElement[, anotherExistingElement])

For example:

selection.insert("div",":first-child")

The above code will insert a div before the first child of selected element. Check documentation to learn more.

Another possible way of inserting elements before any node (including plain texts):

var parentEl = d3.select("div").node();
parentEl.insertBefore(document.createElement("div"), parentEl.childNodes[0]);

<script src="https://d3js.org/d3.v3.min.js"></script>
<div>
  This is a plain text
  <a></a>
</div>

Solution 2:

Selection.lower()

selection.lower() will place an element as the first child of its parent.

Together with d3's append, selection.append().lower() can replicate jQuery's prepend

Since D3 v4+, D3 has both selection.raise() and selection.lower() methods. These are used most frequently to move elements in an SVG so that certain elements appear overtop of others, where ordering of SVG elements in the DOM determines draw order. But, they can be used for any element in the DOM.

Here's a quick demonstration using divs and paragraphs:

var div = d3.select("div");

div
  .append("p")
  .text("Inserted")
  .lower();

console.log(div.html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="div">
Text
<p> Child Paragraph </p>
</div>

The snippet takes a div with the following contents:

Text
<p> Child Paragraph </p>

And uses d3 to append a new paragraph and then lower it so that the structure is as follows:

<p>Inserted</p>
Text
<p> Child Paragraph </p>

And for comparison with with jQuery's prepend:

var div = $("div");

div
  .prepend("<p>Inserted</p>");

console.log(div.html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div">
Text
<p> Child Paragraph </p>
</div>

More Info

The selection.lower() is implemented as such (see docs for more info):

selection.each(function() {
  this.parentNode.insertBefore(this, this.parentNode.firstChild);
});