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