Выполнение кода javascript до вывода html на экран

Question

Захотел я написать документацию к своему инди-проекту. Выбор пал на html. Для красоты мне надо, чтоб ключевые слова выделялись цветом, но прописывать каждому слову <span style="color: blue;"> или ещё какие-то лишние дополнения нет желания, и я решил воспользоваться javascript. Внешний скрипт должен был просто заменять ключевые слова на них же, но в тэгах форматирования. Экспериментировать начал на enum. Файлы .html и .js в одной и той же папке.

Файл script.js:

const elements = document.querySelectorAll('p');
elements.forEach((element) => {
    element.textContent = element.textContent.replace('enum', '<span       
    style="color: blue;">enum</span>');
});

Файл документации .html

<body>
    <script src="script.js" defer></script>
    <p>
        enum class allComponentClass
        <br>
        содержит список всех компонентов и задаёт им всем идентификатор
        <br>
        ...
    </p>
</body>

Но при открытии в браузере у меня показывается текст с кодом, то есть <span style="color: blue;">enum</span> class allComponentClass содержит список.... Скрипт сработал, но браузер не выполнил форматирование.
Ещё заметил, что <br> не создаёт новую строку, когда скрипт срабатывает. С абзацами <p> всё в порядке.
Я пробовал удалять defer, скрипт не выполнялся. Помещение <script src="script.js" defer></script> в <head></head> не помогло. В браузере выполнение javascript включено.
Что надо сделать, чтоб сперва скрипт поменял html, а уже потом это обрабатывалось браузером и шло на экран?

Answer 1

Изменять надо innerHTML, а не textContent

const elements = document.querySelectorAll('p');
elements.forEach((element) => {
  element.innerHTML = element.innerHTML.replace('enum', '<span style="color: blue;">enum</span>');
});

<body>
  <script src="script.js" defer></script>
  <p>
    enum class allComponentClass
    <br>
        содержит список всех компонентов и задаёт им всем идентификатор
    <br>
  </p>
</body>

БЛОГ НА HUSL

Выполнение кода javascript до вывода html на экран

Ответы (1 шт):