How to append characters to an SVG text element without changing its textContent value?

Question

I am trying to append characters to an SVG text element which are separate from the text element\'s text content value. The characters need to come in front of the text ele

Answer 1

Sounds like you want a text/tspan combination E.g.

<text><tspan>foo</tspan>bar</text>

or

<text>foo<tspan>bar</tspan></text>

This would allow you to style the foo and bar differently which seems to be what you want.

You can write

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

to add a tspan to a text element (assuming you've got your text element in the variable called text).

Getting the text content of the tspan just gets the tspan text content for me as one would expect. E.g.

alert(document.getElementById("tspan").textContent);

<svg><text>foo<tspan id="tspan">bar</tspan></text><svg>