На первый взгляд кажется, что оба свойства делают одно и то же.
В то время как innerHTML обеспечивает простой и удобный способ создания HTML-шаблонов в виде строк и внедрения их в DOM [объектную модель документа], textContent позволяет создавать только простые тексты в виде строк.
Теперь давайте разберем его.
textContent в действии:
Скажем, мы хотим вывести «Я люблю JavaScript».
‹p id="вывод"›‹/p›
‹скрипт›
document.getElementById("output").textContent = "Я люблю Javascript";
‹/скрипт›
innerHTML в действии:
innerHTML может делать все то же, что и textContent, плюс более высокий уровень манипулирования DOM.
Например
Давайте выведем «Я люблюJavaScript».
Примечание. «Я» выделено курсивом, «любовь» выделено жирным шрифтом, а «JavaScript» выделено красным.
‹p id="вывод"›‹/p›
‹скрипт›
document.getElementById(“output”).innerHTML = “em›I‹/em› ‹strong›love‹/strong› ‹span style=’color: red;’›JavaScript‹/span›»;
‹/скрипт›
Вывод:
innerHTML богаче, так как с ним можно пофантазировать.
Но если вы хотите вернуть только текстовое содержимое, используйте textContent.
Надеюсь, вы найдете это полезным.
Рад узнать от вас, как бы вы использовали эти свойства?
