В JavaScript для изменения содержимого элементов HTML-страницы используются свойства innerHTML, outerHTML, innerText, outerText и textContent. Как их применять, в чем особенности этих свойств и отличие друг от друга — рассмотрим в этой статье на примерах.
Свойство innerHTML
Свойство innerHTML предназначено для получения или перезаписи содержимого элемента DOM. В качестве значения этого свойства используется строка HTML-кода, которая перед ее установкой элементу парсится браузером и преобразуется в HTML.
Чтобы получить значение определенного элемента с помощью innerHTML, необходимо вызвать это свойство у объекта элемента. Получим строку с HTML тегами, которая находится внутри элемента с идентификатором article:
const content = document.querySelector("#article").innerHTML; Для записи нового значения нужно также вызвать свойство innerHTML и передать ему строку через знак «равно».
Как работает innerHTML, можно увидеть на демонстрации ниже.
Исходный HTML:
<article id="article">Нажмите кнопку ниже, чтобы заменить этот текст на два параграфа.</article>
Установим новое значение, обернув каждое слово новой строки в тег параграфа (p). Результатом будет отображение каждого слова на отдельной строке:
document.querySelector("#article").innerHTML = "<p>Первый абзац.</p><p>Второй абзац.</p>"; Результат:
<article id="article">
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</article> Демо:
Чтобы удалить содержимое элемента, достаточно передать innerHTML пустую строку:
document.querySelector("#article").innerHTML = ""; Свойство outerHTML
Аналогично с innerHTML работает и свойство outerHTML. Единственным отличием является то, что innerHTML читает и меняет внутреннее содержимое элемента, к которому применяется, а значение outerHTML включает еще и теги самого элемента.
Прочитаем содержимое элемента с идентификатором article и получим строку, включая теги:
const content = document.querySelector("#article").outerHTML; Продемонстрируем замену с помощью outerHTML.
Исходный HTML:
<article id="article">Нажмите кнопку ниже, чтобы заменить тег article с его содержимым на тег section c заголовком H3.</article>
Заменим тег article на section с заголовком:
document.querySelector("#article").outerHTML = "<section><h3>Заголовок в теге section<h3></section>"; Результат:
<section>
<h3>Заголовок H3 в теге section</h3>
</article> Демо:
Свойство innerText
Если нет необходимости работать с HTML-разметкой в элементе, а только с текстом, лучше воспользоваться свойством innerText. Оно позволяет считывать весь текст вложенных элементов, кроме скрытых с помощью CSS. Результатом будет конкатенация (склеивание) всех вложенных строк.
Получим текст элемента с идентификатором article:
const content = document.querySelector("#article").innerText; При записи с помощью этого свойства HTML-теги, содержащиеся в устанавливаемой строке, не преобразуются в HTML, а записываются в виде строки.
Исходный HTML:
<article id="article">Нажмите кнопку ниже, чтобы заменить этот текст на текст с тегами.</article>
Установим текст с тегами:
document.querySelector("#article").innerText = "<p>Теги параграфа не были преобразованы в HTML.</p>"; Результат:
<article id="article"><p>Теги параграфа не были преобразованы в HTML.</p></article>
Демо:
Свойство outerText
Результат чтения содержимого тега с помощью свойства outerText будет аналогичным innerText. Отличие этих двух свойств заключается том, что outerText заменяет сам элемент на передаваемый текст.
Пример извлечения текста с помощью outerText:
const content = document.querySelector("#article").outerText; Продемонстрируем замену цитаты простым текстом.
Исходный HTML:
<article id='article'>
<blockquote>Нажмите кнопку ниже, чтобы заменить эту цитату на обычный текст.</blockquote>
</article> Установим обычный текст вместо тега blockquote:
document.querySelector("#article blockquote").outerText = "Цитата преобразована в обычный текст."; Результат:
<article id='article'>Цитата преобразована в обычный текст.</article>
Демо:
Нажмите кнопку ниже, чтобы заменить эту цитату на обычный текст.
Свойство textContent
В DOM есть похожее на innerText свойство — textContent. Оно отличается от innerText тем, что считывает все вложенные элементы, включая скрытые с помощью CSS, в то время как innerText игнорирует скрытые элементы.
Чтение текста, используя textContent, происходит так:
const content = document.querySelector("#article").textContent; Рассмотрим установку текста из скрытого элемента.
Исходный HTML:
<article id="#article">Нажмите кнопку ниже, чтобы увидеть скрытый с помощью CSS параграф. <p style="display: none;">Этот параграф скрыт с помощью CSS.</p></article>
Извлечем значение вместе со скрытым элементом с помощью textContent и затем сохраним полученный текст в исходный элемент:
const content = document.querySelector("#article").textContent;
document.querySelector("#article").textContent = content; Результат:
<article id='article'>Нажмите кнопку ниже, чтобы увидеть скрытый с помощью CSS параграф. Этот параграф скрыт с помощью CSS.</article>
Демо:
Резюмируя, внесем сравнительные особенности рассмотренных выше свойств в сводную таблицу:
| Чтение из элемента | Запись в элемент | |
|---|---|---|
| innerHTML | HTML-код внутри элемента | HTML-код внутри элемента |
| outerHTML | HTML-код вместе с самим элементом | HTML-код вместе с самим элементом |
| innerText | Конкатенация вложенного текста без HTML, исключая скрытые элементы | Строка текста внутрь элемента |
| outerText | Конкатенация вложенного текста без HTML, исключая скрытые элементы | Строка текста заменяет сам элемент |
| textContent | Конкатенация вложенного текста без HTML, включая скрытые элементы | Строка текста внутрь элемента |