如何在子元素的页面加载时替换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"部分有一些 java 添加了所有这些代码。更重要的是，我需要该数据行为命令附带的所有其他内容，因为这就是在单击时将我的视频源交换到字幕版本并返回的内容。所以我无法删除它。所以我的下一个想法是让我们使用 JS 来更改该“a”链接的innerHTML。内部HTML是：

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

因此，如果我可以将其替换为“切换字幕”，我就一切就绪了。但是，当“a”链接没有 ID 时，如何交换它的innerHTML？我只能将 ID 分配给它的父 DIV (captiontoggle)。我尝试添加这个脚本：

<script>

var x = document.getElementById("captiontoggle");

var y = x.getElementsByTagName("a");

y.innerHTML = "test";

</script>

...但这并没有改变任何事情。从我的实验看来，我可能无法在下面两层执行此操作...就像我可以更改captiontoggle的innerHTML，但不是它的“a”元素。

我愿意接受建议！谢谢。

Answer 1

您需要使用父引用来获取子项并在那里进行更改innerHTML<script>&nbsp;&nbsp; var x = document.getElementById("captiontoggle");&nbsp;&nbsp; var y = x.children[0];&nbsp;&nbsp; y.innerHTML = "test";&nbsp;</script>工作片段：var x = document.getElementById("captiontoggle");var y = x.children[0];y.innerHTML = "test";<div id="captiontoggle" class="co-quality-switch" data-behavior="quality_switch">&nbsp; <a class="co-quality-switch" href="#" data-behavior="switch-low" style="">&nbsp; &nbsp; <i class="co-icon-video-camera"></i> watch in high quality&nbsp; </a></div>