Свойство innerHTML
Пример element.innerHTML
Получить HTML-содержимое элемента с помощью id="myP":
let html = document.getElementById("myP").innerHTML;
Попробуйте сами »
Измените HTML-содержимое элемента с помощью id="demo":
document.getElementById("demo").innerHTML = "Я изменился!";
Попробуйте сами »
Получить HTML-содержимое элемента <ul> с помощьюid="myList":
let html = document.getElementById("myList").innerHTML;
Попробуйте сами »
Удалить HTML-содержимое элемента <p> с помощью id="demo":
element.innerHTML = "";
Попробуйте сами »
Ещё примеры ниже.
Описание innerHTML
Свойство innerHTML задает или возвращает HTML-содержимое (внутренний HTML) элемента.
Разница innerHTML, innerText и textContent
См. ниже
Синтаксис innerHTML
Верните свойство innerHTML:
element.innerHTML
Установите свойство innerHTML:
element.innerHTML = text
Значение свойства innerHTML
| Значение | Описание |
|---|---|
| String | HTML-контент. |
Возвращаемое значение innerHTML
| Тип | Описание |
|---|---|
| String | HTML-содержимое элемента. |
Ещё примеры innerHTML
Измените HTML-содержимое двух элементов:
let text = "Привет, Андрей.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;
Попробуйте сами »
Измените HTML-содержимое и URL-адрес ссылки:
element.innerHTML = "schoolsw3";
element.href = "https://www.schoolsw3.com";
Попробуйте сами »
Разница innerHTML, innerText и textContent
| Свойство innerHTML возвращает: Текстовое содержимое элемента, включая все пробелы и внутренние теги HTML. |
| Свойство innerText возвращает: Только текстовое содержимое элемента и всех его дочерних элементов, без пробелов и тегов скрытого текста CSS, за исключением элементов <script> и <style>. |
| Свойство 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 возвращает: Этот элемент имеет дополнительный интервал и содержит элемент пустоты. |
| Свойство innerHTML возвращает: Этот элемент имеет дополнительный интервал и содержит <span>элемент пустоты</span>. |
| Свойство textContent возвращает: Этот элемент имеет дополнительный интервал и содержит элемент пустоты. |
Поддержка браузера innerHTML
element.innerHTML поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | Да |