如何在子元素的页面加载上替换 innerHTML？答案

【问题标题】：How do I replace innerHTML on page load of a child element?如何在子元素的页面加载上替换 innerHTML？
【发布时间】：2020-03-29 00:28:15
【问题描述】：

让我们从我不流利的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 正在添加所有这些代码。更重要的是，我需要该 data-behavior 命令附带的所有其他内容，因为这是将我的视频源交换为字幕版本并在单击时返回的内容。所以我不能删除它。所以我的下一个想法是让我们只使用 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>

...但它并没有改变任何东西。从我的实验看来，我可能无法在 2 层以下执行此操作……就像我可以更改标题切换的 innerHTML，但不是“a”元素。

我愿意接受建议！谢谢。

【问题讨论】：

var y = x.getElementsByTagName("a")[0] 会成功吗？ getElementsByTagName() 返回 NodeList，而不是 Node。
Anant，没用，但谢谢你先插话。
K Lee，做到了！

标签： javascript jquery html dom

【解决方案1】：

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

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

工作sn-p：

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>

【讨论】：