使用HTML或Javascript替换网页上的文本

我正在定制一个由第三方提供和托管的HTML页面，因此我对该页面的操作受到严格限制。页面上有一个如下所示的导航菜单

<ul class='nav'>
   <li class='active'>
     <a href='/affiliate'>
       <span id='affiliate-nav-homepage'>
         <span class='default'>Home Page</span>
       </span>
     </a>
   </li>
   <li>...

。。。

问题：如果只允许我在页面

中添加

元素，如何使上述代码片段显示文本“Home”而不是“Home Page”；并在页面开头附近添加一些HTML代码（可能包括Javascript）

我曾考虑走这两条路中的一条，但这两条路都有问题

1） 使用CSS隐藏他们的文本（“主页”）。使用

：before

或

：after

伪选择器添加我自己的文本（“主页”）

display:none

可能不是隐藏文本的好方法，因为不理解

：before

和

：before

和

：before

的浏览器仍会理解

display:none

，而我最终将完全没有文本

有更好的CSS替代方案吗？是否将字体大小更改为0？更改文本颜色？不知何故操纵z指数？如果一些较旧的浏览器显示文本“主页”，这是可以的。如果某些浏览器显示“主页主页”，或者某些浏览器根本不显示任何文本，则不正常

--或--

2） 使用Javascript操作DOM

使用Javascript的困难在于，我只能在页面正文的开头附近插入它，然后再插入要修改的元素。我可以钩住整个页面加载后触发的事件，但我希望避免页面文本闪烁（文本“主页”短暂显示，然后更改为“主页”）。有这样一个事件吗？我该怎么做

感谢您的帮助。

在JavaScript中 在脚本块中，将执行此操作

这将在页面加载时执行。这将执行得非常快，几乎在所有情况下都不会看到文本跳转

例如：

window.addEventListener（“加载”，函数（）{
document.querySelector（“span.default”）.textContent=“Home”；
}，假）



防闪光修复：

.default { display: none; }

文档准备就绪时，更改文本并显示：

body.onload = function (){

    //getElementsByClassName not working in old browsers, so ...
    var el = document.getElementById('affiliate-nav-homepage').getElementsByTagName('span')[0];

    el.innerHTML = 'Home';
    el.style.display = 'block';
};

另外，您可以通过此方法隐藏所有内容并在所有javascript更改后显示

这不是一个优雅的解决方案，但正如您所说，您只有有限的选项来解决问题。
您想要支持的浏览器都不支持
：before
。然而，这并不是说这是一个好的解决方案。很高兴知道。这包括移动浏览器吗？是：在CSS2的一部分之前，CSS3？是的。这是CSS2的一部分。看见对于IE8，您需要使用
：before
（单冒号）。谢谢您，Mateusz。你能详细说明一下“.default{display:none；}”反睫毛修复程序吗。我会撤销Javascript中的“显示：无”吗？如果是这样，有没有办法在Javascript中设置“display:none”？这样，如果Javascript不可用，我仍然会显示一些内容。是的，您可以在Javascript中隐藏
。默认的
元素，但正如您所说，您只能访问Javascript代码，在所有元素之前，所以不能。因此，如果您不想隐藏此元素，只需删除css规则，并删除
el.style.display='block'来自javascript的代码行。如果我使用javascript添加一个额外的
.default{display:none；}
元素到头部，你认为它会工作得很好吗？我想这不会有问题。谢谢你，Mouser。对于CSS解决方案，是否存在浏览器支持“display:none”而不支持：before伪元素的危险？如果是这样，我可以使用Javascript测试浏览器对这两个特性的支持，然后有条件地添加CSS样式（在DOM可用之前）？知道怎么做吗？@george
：before
在所有主流浏览器中都受支持。甚至在所有现代移动设备上。因为IE9所以你很好。IE8很快就会被淘汰。谢谢你，穆瑟。我最终选择了另一个解决方案，所以我会接受这个答案。这两个答案实际上都有效。我希望两者都能接受。谢谢你的帮助。
body.onload = function (){

    //getElementsByClassName not working in old browsers, so ...
    var el = document.getElementById('affiliate-nav-homepage').getElementsByTagName('span')[0];

    el.innerHTML = 'Home';
    el.style.display = 'block';
};