Как заменить внутреннюю HTML при загрузке страницы дочернего элемента?

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:

<div id="captiontoggle" class="co-quality-switch" data-behavior="quality_switch">
</div>

Когда страница загружена, она плюнула обратно так же, как и раньше, с моим добавленным идентификатором на div. Прогресс!

<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>

Так что, очевидно, есть некоторый java на серверной части data-поведения = "quality_switch" , которая добавляет весь этот код. Главное, мне нужны все другие вещи, которые идут с этой командой поведения данных, так как именно это переключает мой источник видео на версию заголовка и обратно при нажатии. Так что я не могу удалить это. Поэтому моей следующей мыслью было просто использовать JS, чтобы изменить внутренний HTML этой ссылки "a". Внутреннее значение HTML:

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

Так что, если я смогу просто поменять его местами на «переключение подписей», я буду готов. Но как я могу поменять местами HTML ссылки "a", если у нее нет идентификатора? Я могу назначить идентификатор только родительскому DIV (captiontoggle). Я попытался добавить этот скрипт:

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

... но это ничего не изменило. Из моих экспериментов похоже, что я не могу сделать это на 2 слоя вниз ... Как будто я могу изменить внутренний HTML элемента captiontoggle, но не это элемент "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>