Если вы когда-нибудь обнаруживали, что не знаете, что использовать: .innerHTML или .innerText, вы не одиноки! Многие начинающие разработчики испытывают трудности при попытке манипулировать DOM. Читайте дальше, чтобы узнать о различиях между этими двумя свойствами и о том, почему опытные разработчики подходят к innerHTML с осторожностью.
.innerHTML
InnerHTML — это свойство JavaScript, которое позволяет разработчикам динамически манипулировать HTML-информацией элемента в DOM. Это свойство можно использовать для установки внутреннего текста элемента, а также для установки атрибутов и инструкций по форматированию. Рассмотрим приведенный ниже пример.
const div = document.createElement("div")
div.innerHTML = "<p id="p1" class="paragraph">innerHTML is a powerful tool!</p>"
Здесь мы используем document.createElement для создания элемента <div>. Затем мы используем innerHTML, чтобы указать JavaScript создать элемент <p> с идентификатором «p1» внутри нашего <div>. Мы также используем innerHTML для установки текстового содержимого нашего вновь созданного элемента <p>.
Когда наша страница загрузится, свойство innerHTML позволит JavaScript распознать все, что мы хотим включить в наш <div>. JavaScript отобразит innerHTML is a powerful tool! как «innerHTML is a powerful tool!».
.innerText
InnerText — это свойство JavaScript, которое позволяет разработчикам динамически манипулировать внутренней текстовой информацией элемента в DOM. Это свойство можно использовать для задания содержимого внутреннего текста элемента, но его нельзя использовать для задания атрибутов или инструкций форматирования. Давайте рассмотрим наш пример с использованием innerText.
const div = document.createElement("div")
const p = document.createElement("p")
div.append(p)
p.id = "p1"
p.className = "paragraph"
p.innerText = "innerHTML is a powerful tool!"
Здесь мы используем document.createElement для создания элемента <div> и элемента <p>. Затем мы используем div.append для добавления нашего элемента <p> к нашему элементу <div> и p.id для установки id нашего элемента <p>. Наконец, мы используем innerText для установки текстового содержимого нашего элемента <p>.
Когда наша страница загрузится, innerHTML is a powerful tool! будет отображаться как «innerHTML is a powerful tool!».
Сравнение
Вы можете заметить, что наш пример innerText достиг той же цели, что и пример innerHTML, но для этого потребовалось несколько больше шагов. Давайте разберемся, почему это так.
В нашем примере innerHTML мы использовали innerHTML для создания элемента <p>, установки его класса и id, добавления его к нашему <div> и установки текстового содержимого нашего <p>. Поскольку мы использовали innerHTML для создания нашего <p> непосредственно внутри нашего <div>, нам не нужно было использовать div.append, как это было в примере с innerText.
Аналогично, мы использовали innerHTML для установки имени класса и id нашего значения <p>, поместив эти атрибуты непосредственно в тег <p>, как они появятся в HTML-файле. Благодаря этому нам не нужно было использовать p.id или p.className, как в примере с innerText.
Выводы
Мы увидели, как innerText и innerHTML могут быть использованы для манипулирования DOM. Мы также рассмотрели ограничения свойства innerText и выяснили, почему это свойство требует дополнительных действий по сравнению со свойством innerHTML. Теперь давайте обсудим, почему разработчики не всегда предпочитают использовать innerHTML.
Как мы узнали, innerHTML обладает уникальной способностью создавать элементы и устанавливать атрибуты. К сожалению, он может также легко удалять их, хотите вы этого или нет! Помните, что innerText изменяет только текстовое содержимое элемента, а innerHTML изменяет внутренний текст элемента, дочерние узлы и атрибуты. Поэтому важно соблюдать осторожность при использовании innerHTML и предпочесть innerText, если вы не уверены, откуда берутся данные.