Свойство innerHTML элемента HTML DOM

Определение и использование

innerHTML Свойства устанавливают или возвращают HTML-содержимое элемента (внутренний HTML).

См. также:

Атрибут innerText

Атрибут textContent

Пример

Пример 1

Получить HTML-содержимое элемента с id="myP":

let html = document.getElementById("myP").innerHTML;

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

Пример 2

Изменить HTML-содержимое элемента с id="demo":

document.getElementById("demo").innerHTML = "I have changed!";

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

Пример 3

Получить HTML-содержимое элемента <ul> с id="myList":

let html = document.getElementById("myList").innerHTML;

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

Пример 4

Удалить HTML-содержимое элемента <p> с id="demo":

element.innerHTML = "";

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

Пример 5

Изменить HTML-содержимое двух элементов:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

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

Пример 6

Повторить HTML-контент элемента:

element.innerHTML += element.innerHTML;

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

Пример 7

Изменить HTML-контент и URL ссылки:

element.innerHTML = "W3School";
element.href = "";

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

Грамматика

Вернуть свойство innerHTML:

element.innerHTML

Установить свойство innerHTML:

element.innerHTML = text

Значение атрибута

Значение Описание
Строка. HTML-контент

Возвратное значение

Тип Описание
Строка HTML-контент элемента

Разница между innerHTML, innerText и textContent

Свойство innerText возвращает:

Возвращает только текстовый контент элемента и всех его подэлементов, без скрытого текста CSS, пробельных символов и тегов, кроме элементов <script> и <style>.

Свойство innerHTML возвращает:

Текстовый контент элемента, включая все пробельные символы и внутренние теги HTML.

Свойство textContent возвращает:

Текстовый контент элемента и всех его потомков, включая пробельные символы и скрытый текст CSS, но без тегов.

Пример HTML

<p id="myP">   Этот элемент имеет дополнительное пространство     и содержит <span>элемент span</span>.</p>

Примеры JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

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

В上面的 примере:

Свойство innerText возвращает:

Этот элемент имеет дополнительное пространство и содержит элемент span.

Свойство innerHTML возвращает:

   Этот элемент имеет дополнительное пространство и содержит <span>элемент span</span>.

Свойство textContent возвращает:

   Этот элемент имеет дополнительное пространство и содержит элемент span.

Поддержка браузеров

Все браузеры поддерживают element.innerHTML:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка Поддержка