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

Question

首先，我不太精通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上添加了我的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>
因此，显然在data-behavior =“ quality_switch”

部分的后端上添加了所有这些代码。更重要的是，我还需要data-behavior命令附带的所有其他功能，因为这就是将视频源切换为字幕版本并在单击时切换回字幕版本的原因。所以我无法删除它。因此，我的下一个想法是让我们仅使用JS来更改该“ a”链接的innerHTML。 innerHTML是：

<i class="co-icon-video-camera"></i>watch in low quality
因此，如果我可以将其交换为“切换字幕”，我将一切准备就绪。但是，当没有ID时，如何交换“ a”链接的innerHTML？我只能为其父DIV（captiontoggle）分配一个ID。我尝试添加此脚本：

<script>
var x = document.getElementById("captiontoggle");
var y = x.getElementsByTagName("a");
y.innerHTML = "test";
</script>
...但没有任何改变。从我的实验看来，我可能无法向下两层工作……就像我可以更改captiontoggle的innerHTML一样，但不是“ a”元素。

我愿意接受建议！谢谢。

首先，我不太精通javascript，但我知道一点。我在运行后端看不到的代码的平台上。这意味着我只能控制很多。例如，有一个...

Answer 1

您需要使用父级引用来获取子级并在此处进行更改innerHTML