Данное задание размещено на одном из крупнейших ресурсов СНГ в качестве теста на фронтендщика…
Итак! Имеем блок с текстом:
<div class="example">Дважды <span>два</span> - пять</div>
Задание изложено следующим образом:
Дан фрагмент HTML. Используя только нативный JavaScript исправьте текст, следующий после тега <span> так, чтобы элемент <span> остался незатронутым.
Решение данной задачи следующее:
<script>
document.getElementsByClassName('example')["0"].childNodes[2].textContent = " - шесть";
</script>
И короткое разъяснение кода для понимания того, что происходит:
- document – наша страничка
- .getElementsByClassName('example') – выбираем содержимое контейнера с классом example
- ["0"] – имеем массив содержимого контейнера, и нам нужен его первый элемент
- .childNodes – в этом объекте находятся дочерние элементы, их трое: текст до спана, спан, текст после спана.
- [2] – выбираем текст после спана
- .textContent = " – шесть" – присваиваем этому элементу свой текст
Автор решения @only_darkangel (Telegram).
Спасибо за внимание 😉