Change svg text with jquery

Question

I have browsing the internet for a good 2 hours now, trying to find the answer to a problem that seemingly many had, but I can't find a proper solution to my problem. I need to change the text in an svg file, eventually it'll probably be a text input in the browser. I managed to use foreignobject, but ultimately that's not the solution to my problem, since I need to align it to paths.

My SVG

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 841.9 595.3" style="enable-background:new 0 0 841.9 595.3;" xml:space="preserve">
<style type="text/css">
</style>
<text transform="matrix(1 0 0 1 325.2451 144.7144)" class="st0 st1" id="id-of-the-text">hey</text>
 <text class="testText" id="testText" x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line.</tspan>
    <tspan x="10" y="70">Second line.</tspan>
  </text>
  <text x="40" y="60">more text</text>
</svg>

And the failed attempts from answers to similar questions

$('#id-of-the-text').textContent = 'test';  
$("#id-of-the-text").text("new-value");  
$("#id-of-the-text")['innerText' in $("#id-of-the-text") ? "innerText" : "textContent"] = "some value";

It might be a stupid little mistake, otherwise I can't understand why nothing works for me.

Solution

Using text() should have worked. Maybe it failed because your first line had an error.

In any case, see my example for various ways to change text. Some require a mixture of jQuery and DOM features.

// Change the first text element
$('#id-of-the-text').text("hey 2");  

// Change the first text node of the second text element.
// Have to do this a little differently. We need to be careful that we only change
// the first text node and that we don't replace everything including the tspans.
$("#testText").get(0).firstChild.textContent = "Several lines 2";

// Change the first tspan
$("#testText tspan:nth-child(1)").text("First line 2");

// Change the second tspan
// Alternative to using "nth-child(2)":
$("#testText tspan").last().text("Second line 2");

// Change the last text element
$("svg text").last().text("more text 2");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 841.9 595.3" style="enable-background:new 0 0 841.9 595.3;" xml:space="preserve">
  <style type="text/css">
  </style>

  <text transform="matrix(1 0 0 1 325.2451 144.7144)" class="st0 st1" id="id-of-the-text">hey</text>
   <text class="testText" id="testText" x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line.</tspan>
    <tspan x="10" y="70">Second line.</tspan>
  </text>
  <text x="40" y="60">more text</text>
</svg>