Совместное использование .textContent и .innerHTML   при адресации в js

Использование в js .textContent и .innerHTML для одного и того же элемента

Разница:

• .textContent — устанавливает или получает текстовое содержимое элемента без HTML-разметки. Оно выводит только текст, и любые HTML-теги в нем трактуются как текст, а не как разметка.
• .innerHTML — устанавливает или получает HTML-содержимое элемента. Здесь теги будут интерпретироваться как HTML-разметка, и браузер их обработает.

Если присвоить .textContent после .innerHTML, то HTML-разметка не будет отображаться, так как .textContent перезапишет содержимое только текстом.

Пример:

javascriptCopy codeelement.innerHTML = "<strong>Загрузка</strong> завершена!";
console.log(element.textContent); // Выведет "Загрузка завершена!", а не HTML.

element.textContent = "Прогресс: 50%"; 
console.log(element.innerHTML); // Теперь HTML-разметка стерта, и виден только текст "Прогресс: 50%".

Итак:

Для одного и того же элемента используйте либо .textContent, либо .innerHTML в зависимости от того, что именно требуется вывести.