修改 google.translate.TranslateElement 结果中的元素

我正在尝试将非常方便的 Google Translate 翻译元素嵌入到网页中，这非常简单并且效果很好，但我需要更改在生成的 HTML 中显示的默认文本：

在使用过许多 Google API 和 js 库后，我认为这不会有问题，因为它几乎肯定是可配置的，但环顾了一段时间后，我找不到任何对允许您设置它的属性的引用，并且总体而言，文档似乎很可怜。基本代码是：

<div id="google_translate_element"></div>
<script>
   function googleTranslateElementInit() {
      var translator = new google.translate.TranslateElement({
      pageLanguage: 'en',
      autoDisplay: false,
      multilanguagePage: false,
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
   }, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

当我创建时，我无法将其设置为属性translator，我决定破解它并使用onDOMNodeInserted监听器在加载到后仅更改生成的 HTML<div id="google_translate_element"></div>。我在这里使用 jQuery，所以我的代码是：

$(document).ready(function(){
   $('#google_translate_element').bind('DOMNodeInserted', function(event) {
       $('.goog-te-menu-value span:first').html('Translate');
   });
})

这就是事情变得有趣的地方。 Chrome 完美地加载了所有内容，并完美地完成了 innerHTML 替换。 Internet Explorer (8) 完全忽略 DOMNodeInserted 侦听器，并且页面加载就像从未调用过 jQuery 函数一样。 Firefox (10) 似乎加载良好（但根本没有翻译元素），然后冻结，开始吞噬内存，然后崩溃。

关于如何让这个innerHTML替换工作有什么想法吗？如果您知道displayLabel : "Translate"-类似的属性当然是首选，但除此之外（而且是一个非常丑陋的setTimeouthack）有什么办法可以让它工作吗？

您可以使用 CSS 来完成此操作，只是选择语言时它不会更改标签。

#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child{display: none;}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before{content: 'Translate'}