Javascript SVG时HTML不更新<；文本>；被改进的

编辑：这个问题与发布的代码中显示的不一样，尽管我不确定这个问题是否仍然有用

在我陈述我的困惑之前，首先让我解释一下，我正在构建一个供个人使用的小型在线应用程序。我知道每个使用它的人都会使用Chrome，所以没有必要特意确保它得到IE的支持。下面是：

我有一个SVG的一部分，它的HTML大致如下：

<g class="clue">
    <g class="cypher">
        <circle cy="20" class="roundButton></circle>
        <text x="5" y="22" transform="rotate(60 0,20)">yo!</text>
    </g>
</g>

我对你的问题有点困惑，因为我不知道你指的是什么HTML。是否将innerHTML设置为标签？另外，如果您试图将文本元素从“yo”->“orange hippo”更改为“如果存在现有元素，则返回时它将如何更改”

如果您试图删除“yo”并替换为“orange hippo”，您可以从

函数getOrCreateLabel（线索，密码）{
//移除，以便将yo替换为橙色河马
//var test=Cypher.getElementsByTagName（“文本”）；
//如果（测试长度>0）
//返回测试[0]；//这有效，因为每个密码只有1个元素。
//使用CreateElements函数而不是createElement
//标签=document.createElement（“文本”）；
var label=document.createElements（“http://www.w3.org/2000/svg“，“文本”）
label.setAttribute（“x”，5）；
label.setAttribute（“y”，22）；
setAttribute（“变换”、“旋转（60 0,20）”）；
//在追加之前创建文本节点
设textNode=document.createTextNode（“橙色低眼压”）；
//将文本节点附加到标签
label.appendChild（textNode）
//将标签粘贴到cypher
Cypher.appendChild（标签）；
退货标签；
}

---

我希望我没有误解你的问题。

事实证明，问题不在于我发布的代码，而在于我试图通过引用将参数传递给函数，而不记得这种事情在js中是不允许的。吸取教训！非常感谢您的帮助和快速回复，sin Triba。

是的，我正在尝试用“hippo”替换“Yo！”，而我遇到的麻烦是，Chrome的开发者工具窗格中“元素”下打印的HTML根本没有改变，尽管我可以看到，如果我去控制台验证不同的值，所需的更改在某种程度上会产生影响。您是否尝试使用

document.getCreateElements

而不是

document.createElement（）

在标签上设置了HTML或添加了textNode，标签会显示良好的格式。但是如果我使用

document.createElement（）

I更改为document.getcreateElements，它不会呈现“hippo”，但在解决该问题后，将其更改为实验，并发现没有任何区别。有趣的是，对你来说确实如此；我应该记住这一点。很高兴你明白了。更改节点的文本似乎很容易，但如果您是像我这样的javascript程序员新手/爱好者，您知道使用javascript没有什么是容易的，但至少一切都是可能的。祝你的应用程序好运！如果这个问题对其他人没有帮助（因为问题不在发布的代码中），那么最好删除它。

function getOrCreateLabel(Clue,Cypher){
    var test=Cypher.getElementsByTagName("text");
    if(test.length>0)
        return test[0]; //This works 'cuz each cypher only has 1 <text> element.
    label=document.createElement("text");
    label.setAttribute("x",5);
    label.setAttribute("y",22);
    label.setAttribute("transform","rotate(60 0,20)");
    Cypher.appendChild(label);
    return label;
}

function getOrCreateLabel(Clue,Cypher){
    // removed so yo is replaced with orange hippo
    //var test=Cypher.getElementsByTagName("text");
    //if(test.length>0)
    //    return test[0]; //This works 'cuz each cypher only has 1 <text> element.

    // use createElementNS function instead of createElement
    //label=document.createElement("text"); 
    var label = document.createElementNS("http://www.w3.org/2000/svg", "text")


    label.setAttribute( "x",5);
    label.setAttribute( "y",22);
    label.setAttribute( "transform","rotate(60 0,20)");

    //create a text node before appending
    let textNode = document.createTextNode("orange hypopotamus");

    //append text node to label
    label.appendChild( textNode )

    // apend label to cypher
    Cypher.appendChild(label);

    return label;
}