JavaScript свойство Element.innerHTML

Определение и применение

JavaScript свойство innerHTML объекта Element позволяет установить или возвратить содержимое элемента. Свойство предназначено для работы с HTML или XML разметкой.

Чтобы вставить HTML в документ, а не заменить содержимое элемента, используйте метод insertAdjacentHTML().

Не передавайте непроверенный пользовательский HTML: обработчики событий и другие активные конструкции могут привести к XSS. Для обычного текста используйте textContent или insertAdjacentText(). При обязательном применении Trusted Types строка без подходящей политики может вызвать TypeError.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Element.innerHTML
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`innerHTML`	✓1	✓12	✓1	✓8	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓1	✓1
Requires TrustedHTML instance when trusted types are enforced	✓83	✓83	✓148	✓69	✓26	✓83	✓148	✓59	✓26	✓13.0	✓83	✓26
Serializes < and > in attributes as &lt; and &gt; (see this spec issue)	✓138	✓138	✓140	✓122	✓26	✓138	✓140	✓91	✓26	✓30.0	✓138	✓26

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

// получение содержимого
const content = element.innerHTML;

// установка содержимого
element.innerHTML = htmlString;

Установка значения свойством innerHTML удаляет все потомки элемента и заменяет их узлами, построенными путем синтаксического анализа HTML, заданного в переданном значении.

Спецификация

HTML Standard.

Исключения

Исключения Element.innerHTML
Тип исключения	Описание
`SyntaxError`	Возникает при установке значения в XML-документе, если строка не является правильно сформированной XML разметкой. В HTML-документе разбор не выбрасывает исключение: некорректная разметка исправляется по правилам HTML-парсера.
`TypeError`	Возникает, если на странице обязательно применение Trusted Types, а присваивается обычная строка вместо объекта `TrustedHTML`, и подходящая политика по умолчанию не задана.

Примеры, попробуйте сами

Чтение и замена разметки элемента

Нажмите ▶ и посмотрите в консоли исходную разметку списка. Нажмите кнопку в результате: прежние пункты будут удалены и заменены новыми. Измените строку в main.js и запустите пример повторно.

index.html

HTML

<ul id="list">
    <li>Первый пункт</li>
    <li>Второй пункт</li>
</ul>
<button id="replace">Заменить содержимое</button>

main.js

JavaScript

const list = document.getElementById('list')

console.log(list.innerHTML) // разметка потомков, без самого тега <ul>

document.getElementById('replace').addEventListener('click', function () {
    // прежние элементы <li> удаляются, новые строятся разбором строки
    list.innerHTML = '<li><strong>Новый</strong> пункт</li><li>Ещё один пункт</li>'
    console.log('Элементов в списке:', list.children.length)
})

В этом примере свойство innerHTML сначала возвращает разметку дочерних элементов списка <ul> без тега самого списка. При нажатии на кнопку свойству присваивается новая строка: все прежние потомки удаляются, а новые узлы создаются разбором переданной разметки.

Чем innerHTML отличается от textContent

Нажмите ▶ и сравните в консоли значения innerHTML и textContent одного абзаца. В результате первая строка вставлена как разметка, вторая — как обычный текст.

index.html

HTML

<p id="code">Условие: a &lt; b &amp;&amp; b &gt; c</p>
<p id="as-html"></p>
<p id="as-text"></p>

main.js

JavaScript

const source = document.getElementById('code')

console.log('innerHTML:', source.innerHTML) // символы &, < и > возвращаются как &amp;, &lt; и &gt;
console.log('textContent:', source.textContent) // исходный текст без сущностей

const value = '<em>курсив</em>'
document.getElementById('as-html').innerHTML = value // строка разбирается как разметка
document.getElementById('as-text').textContent = value // строка вставляется как текст

Свойство innerHTML возвращает символы &, < и > текстового узла в виде сущностей, а textContent — исходный текст. При записи строка в innerHTML разбирается как HTML, поэтому для пользовательских данных используйте textContent.