Element.innerHTML

Свойство интерфейса Element innerHTML устанавливает или получает HTML или XML разметку дочерних элементов.

Примечание: Если узлы <div>, <span>, или <noembed> имеют дочерние текстовые узлы, содержащие символы (&), (<), или (>), innerHTML вернет эти символы как &amp, &lt и &gt соответсвенно. Используйте Node.textContent для получения правильной копии содержимого этих текстовых узлов. 

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

Syntax

const content = element.innerHTML;

element.innerHTML = htmlString;

Value

Строка DOMString, которая содержит части HTML разметки. Установка значения innerHTML удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке htmlString.

Исключения

SyntaxError
Возникает при попытке установить значение innerHTML строкой, в которой содержится неправильно сформированный HTML.
NoModificationAllowedError
Возникает при попытке вставить HTML в узел, у которого родителем является Document.

Примечания

Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:

document.body.innerHTML = "";  // Replaces body content with an empty string.

Свойство innerHTML многих типов элементов, включая <body> или <html>, могут быть возвращены или перемещены. Это может так же быть использовано для просмотра кода страницы, которая была изменена динамически:

// Copy and paste into address bar as a single line
javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";

Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введен текст в поле ввода <input>, IE меняет значение атрибута <input> свойства innerHTML, но браузеры Gecko не делают этого.

Соображения безопасности

Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.

const name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

Хотя это может выглядеть как атака cross-site scripting, результат безопасный. HTML5 указывает на тег <script> вставленный через InnerHTM должен не выполнится.

Однако, есть способы запустить JavaScript без использования элементов <script>, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

По этой причине,  рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте node.textContent. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. 

Примеры

Этот пример использует innerHTML для создания механизма логгирования сообщений внутри элемента на странице.

JavaScript

function log(msg) {
  var logElem = document.querySelector(".log");
 
  var time = new Date();
  var timeStr = time.toLocaleTimeString();
  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
}

log("Logging mouse events inside this container...");

Функция log() создаёт сообщение получая текущее время из объекта Date, используя toLocaleTimeString(), и соединяя стороку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом "log".

Мы добавляем второй метод, который логгирует информацию о событиях на основе MouseEvent (например, mousedown, click, и mouseenter):

function logEvent(event) {
  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
            event.clientX + ", " + event.clientY + "</em>";
  log(msg);
}

Затем мы используем этот обработчик событий на элементе, который содержит наше логгирование, для каждого события мыши:

var boxElem = document.querySelector(".box");

boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);

HTML

HTML довольно простой для нашего примера.

<div class="box">
  <div><strong>Log:</strong></div>
  <div class="log"></div>
</div>

<div> c классом "box" – просто контейнер для, который даст содержимому пространство вокруг себя. <div> с классом "log" является контейнером для логгирования текста внутри себя.

CSS

Для нашего примера используем следующие CSS стили.

.box {
  width: 600px;
  height: 300px;
  border: 1px solid black;
  padding: 2px 4px;
  overflow-y: scroll;
  overflow-x: auto;
}

.log {
  margin-top: 8px;
  font-family: monospace;
}

Результат

В результате мы получаем такое содержимое. Вы можете видеть логи наводя мышь на элемент, кликая на него и так далее.

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

Спецификация Статус Комментарий
DOM Parsing and Serialization
Определение 'Element.innerHTML' в этой спецификации.
Рабочий черновик Первоначальное определение

Смотрите также

  • innerDOM - For those wishing to adhere to standards, here is one set of JavaScript functions offering to serialize or parse XML so as to set element contents defined as string(s) via the DOM or getting element contents obtained from the DOM as a string.
  • Element.insertAdjacentHTML - Альтернатива для innerHTML, позволяющая добавлять новый HTML.
  • jssaxparser - A more robust (though heavier) solution than innerDOM (supports parsing with namespaces, single-quoted attributes, CDATA sections, etc.) is this SAX2 parser when used with its DOM content handler. (Offers String to DOM; DOM to String is significantly easier)
  • Efficiency considerations: On quirksmode