1

I have an svg text element with two tspan elements. It looks like this.

<text id="majNote5" x="25" y="70">
    <tspan>D</tspan>
    <tspan font-family="'Opus Text'" font-size="25">b</tspan>
</text>

I have a 2nd empty text element which looks like this.

<text id="majChord1" x="425" y="70" ></text>

I want to copy both tspan elements and their respective texts in the first text element into the 2nd text element.

I tried the following:

var majNote5 = document.getElementById('majNote5');
var majChord1 = document.getElementById('majChord1');

majChord1.textContent = majNote5.textContent;

This does copy the text contents of the tspan elements and places it in the other container, but without any of the tspan elements. So afterward it looks like this:

<text id="majChord1" x="25" y="70">Db</text>

How do I get the second text container to look exactly like the first container?

Thanks, --christopher

Christopher Gaston
  • 491
  • 2
  • 6
  • 18
  • 1
    you would have to loop through each children, and copy each of those. Or, you could just do `var clone = document.getElementById('majNote5').cloneNode(true); var majChord1 = document.getElementById('majChord1'); clone.id=majChord1.id; majChord1.parentNode.replaceChild(clone, majChord1);` – Kaiido Jan 06 '16 at 03:28
  • That worked very well. You may want to submit that as an answer. One thing to note, each time the node was replaced, the variable pointing to `document.getElementById('majChord1')` no longer had a reference and had to be declared again with the new node. – Christopher Gaston Jan 07 '16 at 03:48

0 Answers0