如何在子元素的页面加载时替换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> 

  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>