Why are programmatically inserted SVG <tspan> elements not drawn, except with d3.js?

Question

Say I want to programmatically insert an additional <tspan> in the <text> element in the following SVG:

<svg width="300" height="500">
    <text x="50" y="100">
        <tspan x="50">one</tspan>
        <tspan x="50" dy="20">two</tspan>
        <tspan x="50" dy="20">three</tspan>
    </text>
</svg>

This can be done with, among other things, pure JavaScript (.appendChild), jQuery (.append), and d3.js (.append). However, although all three methods successfully insert the element, I can only seem to get it to actually display when it's inserted by d3.js:

See reduced case in this fiddle: http://jsfiddle.net/2NLJY/.

The behaviour is consistent across the browsers I've tested: Firefox, Chrome, and Safari (all OS X 10.8).

What is going on here?

Answer 1

You can't use createElement to create SVG elements. SVG elements must be created in the SVG namespace so you need to write

document.createElementNS("http://www.w3.org/2000/svg", "tspan");

There is a jquery plugin which adds functionality to jquery allowing svg elements to be created.