Javascript 如何选择特定的<；g>；在<；文本>；作为它的子级使用jQuery？

我有如下html

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

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

abc
def

我想选择g标记，它的值为“abc”，并且应该向它附加一些其他的文本标记，这样最终的输出将是

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

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

abc
额外增加的abc
def

将

具有（）的
g
标记作为目标，
包含（）字符串
abc
的
text
标记，然后像这样将元素附加到该
g
标记上

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

$（'g:has（text:contains（“abc”）））.append（$（''，{text:'extra added abc'}））；
将
具有（）的
g
标记作为目标，
包含（）字符串
abc
的
text
标记，然后像这样将元素附加到该
g
标记上

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

$（'g:has（text:contains（“abc”）））.append（$（''，{text:'extra added abc'}））；
试试这个：

$(function(){
  $('g text:contains(abc)').closest('g').append('<text> extra added abc </text>');
});

$（函数（）{
$（'g text:contains（abc）'）。最近的（'g'）。追加（'extra added abc'）；
});
试试这个：

$(function(){
  $('g text:contains(abc)').closest('g').append('<text> extra added abc </text>');
});

$（函数（）{
$（'g text:contains（abc）'）。最近的（'g'）。追加（'extra added abc'）；
});
$（函数（）{
$（'g text:contains（abc）'）。在（'extra added abc'）之后；
});
$（函数（）{
$（'g text:contains（abc）'）。在（'extra added abc'）之后；
});
：感谢您的回复，但我还遇到了另一个问题，通过这种方式，它正确地创建了html代码（在chrome中使用F12进行检查），但不会显示在chrome中（我指的是UI）。。。知道为什么吗？：谢谢你的回复，但我还有一个问题，通过这种方式，它正确地创建了html代码（在chrome中使用F12进行检查），但不会显示在chrome中（我指的是UI）。。。知道为什么吗？