-1

I have an html as follows

<svg>    <g>
        <rect></rect>
        <text> abc </text>
    </g>

    <g>
        <rect></rect>
        <text> def </text>
    </g>
</svg>

then i selected the g tag which has the child "text tag" and its value " abc " and appended some other text tags to it using jquery as follow 

$('g:has(text:contains(" abc "))').append($('<text />', { text: ' extra added abc ' }));

, such that the final output will be 

    <svg>
    <g>
        <rect></rect>
        <text> abc </text>
        <text> extra added abc </text>
    </g>

    <g>
        <rect></rect>
        <text> def </text>
    </g>
</svg>

But the issue is the newly added text (i.e. extra added abc ) is not shown in the UI but the dom object is added in the html code (checked in the debugger tool of chrome)?

ismail baig
  • 861
  • 2
  • 11
  • 39

1 Answers1

0

use 

svg.append("text");

This is valid syntax , Else browser will not understand what is svg text

$('g:has(text:contains(" abc "))').append("text");
Pratik Joshi
  • 11,485
  • 7
  • 41
  • 73