JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg width="300" height="500">
    <text id="t" x="50" y="100" text-anchor="middle">
        <tspan x="50">one</tspan>
        <tspan dy="20" x="50">two</tspan>
        <tspan dy="20" x="50">threeeeeee</tspan>
    </text>
</svg>

JavaScript

// Pure JS
var text = document.getElementById("t");
var tspan = document.createElement("tspan");
tspan.setAttribute("x", 50);
tspan.setAttribute("dy", 20);
tspan.appendChild(document.createTextNode("four"));
text.appendChild(tspan);

// jQuery
$("#t").append(
    $("<tspan>")
        .attr("x", 50)
        .attr("dy", 20)
        .text("five")
);

// d3.js
d3.select("#t").append("tspan")
    .attr("x", 50)
    .attr("dy", 20)
    .text("six");

console.log(text);