Javascript 如何在子元素的页面加载中替换innerHTML？

首先，我对javascript不太流利，但我知道一点。我所在的平台正在运行后端看不到的代码。这意味着我只能控制这么多。例如，有一个标记：

{{ component.quality_switch }}

当页面加载时，它将与以下内容交换：

<div class="co-quality-switch" data-behavior="quality_switch">
    <a class="co-quality-switch" href="#" data-behavior="switch-low" style="">
        <i class="co-icon-video-camera"></i>
        watch in high quality
    </a>
</div>

我的目标是将“a”链接的文本从“高质量观看”替换为“切换字幕”。因此，我尝试并删除了第一个{component.quality_switch}}标记，并将其替换为它通常提取的外部div，并在div中添加了一个ID：

<div id="captiontoggle" class="co-quality-switch" data-behavior="quality_switch">
</div>

当页面加载时，它像以前一样吐回，在div.Progress上添加了我的id

<div id="captiontoggle" class="co-quality-switch" data-behavior="quality_switch">
    <a class="co-quality-switch" href="#" data-behavior="switch-low" style="">
        <i class="co-icon-video-camera"></i>
        watch in high quality
    </a>
</div>

显然，在添加所有这些代码的数据行为=“quality\u switch”部分的后端有一些java。更重要的是，我需要数据行为命令附带的所有其他东西，因为这是将我的视频源交换到标题版本并在单击时返回的东西。所以我不能移除它。所以我的下一个想法是，让我们使用JS来更改“a”链接的innerHTML。innerHTML是：

<i class="co-icon-video-camera"></i>watch in low quality

低质量手表

所以，如果我能把它换成“切换字幕”，我就万事大吉了。但是，当“a”链接没有ID时，如何交换它的innerHTML？我只能为它的父DIV（captiontoggle）分配一个ID。我尝试添加以下脚本：

<script>
var x = document.getElementById("captiontoggle");
var y = x.getElementsByTagName("a");
y.innerHTML = "test";
</script>

var x=document.getElementById（“captiontoggle”）；
变量y=x.getElementsByTagName（“a”）；
y、 innerHTML=“测试”；

。。。但这并没有改变任何事情。从我的实验来看，也许我不能做这两层下来。。。我可以更改captiontoggle的innerHTML，但它不是“a”元素

---

我愿意接受建议！谢谢。

您需要使用父引用获取子项并在那里进行更改

innerHTML

<script> 
  var x = document.getElementById("captiontoggle"); 
  var y = x.children[0]; 
  y.innerHTML = "test"; 
</script>

var y=x.getElementsByTagName（“a”）[0]会不会这样做

getElementsByTagName（）

返回一个

NodeList

，而不是一个

节点

。Anant，这不起作用，但感谢您首先输入。K Lee，成功了！