如何在子元素的頁面加載時替換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>