I'm using JS to dynamically update a text node in an SVG. The code is working, but it is also creating a second, duplicate node.

I've gone through several answers and I haven't found an explanation as to why this code is creating a second text node.

Here is the code I have:

function myFunctionId (id) {
    var s = document.getElementById('text-box');
    var g = s.childNodes[1];
    var txt = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
    txt.setAttribute('x', '200');
    txt.setAttribute('y', '300');
        var t = document.createTextNode("Brand Identity paragraph");}
    else if(id=='ld'){
        var t = document.createTextNode("Logo Design paragraph");}
        var t = '';
    txt.style.fill = 'white';

And here is a snippet of the SVG:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="50 150 500 500" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
<g id="text-box">
        <tspan x="220" y="320" width="160"></tspan>

<g id="bi" onclick="myFunctionId(this.id)">
        <circle class="st2" cx="439.37" cy="269.73" r="45"/>
    <text transform="matrix(1 0 0 1 410.1014 262.9455)"><tspan x="0" y="0" class="st3 st4 st5">Brand</tspan><tspan x="-9.08" y="26.12" class="st3 st4 st5">Identity</tspan></text>

<g id="ld" onclick="myFunctionId(this.id)">
    <circle class="st6" cx="474.7" cy="355.98" r="36.24"/>
    <text transform="matrix(1 0 0 1 454.0022 350.1072)"><tspan x="0" y="0" class="st3 st4 st7">Logo</tspan><tspan x="-8.32" y="22.61" class="st3 st4 st7">Design</tspan></text>

Again, this code basically works, but I only want it to create/update a single text node. And bonus points if someone can also tell me how to contain/wrap the text string. I tried this but it didn't work. (I realize this may have to be a separate question)

0 Answers