如何在子元素的页面加载时替换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 时，如何交换其内部 HTML？ 我只能为它的父 DIV 分配一个 ID（captiontoggle）。 我尝试添加这个脚本：

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

......但它没有改变任何东西。 从我的实验来看，似乎我不能做这 2 层下来......就像我可以改变 captiontoggle 的innerHTML，但不是它的“a”元素。

我愿意接受建议！ 谢谢。

Answer 1

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

<script> 
  var x = document.getElementById("captiontoggle"); 
  var y = x.children[0]; 
  y.innerHTML = "test"; 
</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"> <a class="co-quality-switch" href="#" data-behavior="switch-low" style=""> <i class="co-icon-video-camera"></i> watch in high quality </a> </div>