替换span元素的文本

Question

我想用箭头1替换方形图标（html文件中的span元素中的文本：■）：►。当菜单项前面的图标与其页面ID匹配时，会发生这种情况，因此访问者知道他在此菜单项指示的页面上。

我经历过很多问题，但坚持这个问题。

var newIcon = "►"; // arrow icon
for (var j = 0; j < rightMenuIDs.length; j++){
    var thisID = rightMenuIDs[j];
    var thisSpanIcon = rightMenu[j].children[0].children[0].childNodes[0].nodeValue;
    if(thisID === bodyIDsliced){
        thisSpanIcon = newIcon;
    }
}

我检查了console.log，它说thisSpanIcon已更新为箭头图标。但页面上没有任何变化。 我尝试使用replace（）和其他方法无济于事。

如果有更好/更正确的方法，有人可以躺在我身上吗？

谢谢！

Answer 1

当你说：

thisSpanIcon = newIcon;

您只是覆盖了包含节点现有thisSpanIcon属性的副本的局部变量nodeValue，而不是更改属性（以及节点）本身。

尝试：

var thisSpanNode = rightMenu[j].children[0].children[0].childNodes[0];
if (thisID === bodyIDsliced) {
    thisSpanNode.nodeValue = newIcon;
}

应该改变节点的实际属性。

另请注意，您应该为字符串而不是HTML实体使用Unicode格式，即\u25ba。

Answer 2

您必须使用elem.innerHTML或elem.innerText来更新元素/节点的文本。 （little example）

此外，寻找一些现代的选择元素的方法。