title: Is it possible to append text to a text element in SVG?
body: <p>I am trying to append a new text element at the end of the data label on clicking on that particular text. Is it possible? I tried to add this to my code and it is not displaying the text to be added:</p>
  
  <pre><code>circleGroup.selectAll("text")
             .data(data)
             .enter()
             .append("text")
             .text(function (d) {
                  if (d.label) {
                      return d.label;
                  }
                     return "";
                  })
             .attr("x", function (d) {
                    return x(d.time) + 6;
              })
             .attr("y", function (d) {
                      return y(d.plotY) + 4;
                  })
             .attr("font-size", "10px")
             .attr("fill", "#2d3d45")
             .on("click", function(d) {
                      d3.select(this).append("text").text("[A]").attr("x", function(d) {return x(d.time) + 25;}).attr("y", function(d) { return y(d.plotY) + 4;});
  
             });
  </code></pre>
  
  <p>But it has been appended to the data label.</p>
  
  <p><a href="https://i.stack.imgur.com/S8OTJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S8OTJ.png" alt="enter image description here"></a></p>
  
  <p>Why is the "[A]" text not getting displayed even after being appended to the parent text element ? </p>