Элемент: свойство innerHTML

Свойство Element innerHTML получает или задаёт HTML или XML разметку, содержащуюся внутри элемента.

Более точно, innerHTML получает сериализацию вложенных дочерних элементов DOM внутри элемента или задаёт HTML или XML, которые должны быть распарсены для замены дерева DOM внутри элемента.

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

Сериализация дерева DOM, считываемая из свойства, не включает тени корней — если вам нужно получить строку HTML, включающую тени корней, вы должны использовать методы Element.getHTML() или ShadowRoot.getHTML(). Аналогично, при установке содержимого элемента с помощью innerHTML, строка HTML парсится в элементы DOM, которые не содержат тени корней.

Таким образом, например, <template> парсится как HTMLTemplateElement, независимо от того, указан ли атрибут shadowrootmode. Чтобы установить содержимое элемента из строки HTML, включающей декларативные тени корней, вы должны использовать либо Element.setHTMLUnsafe(), либо ShadowRoot.setHTMLUnsafe().

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

При установке в значение null, это значение null преобразуется в пустую строку (""), поэтому elt.innerHTML = null эквивалентно elt.innerHTML = "".

SyntaxError DOMException

Выбрасывается, если попытка установить значение innerHTML с помощью строки, которая не является правильно сформированным HTML.

NoModificationAllowedError DOMException

Выбрасывается, если попытка вставить HTML в узел, родитель которого является Document.

Чтение innerHTML заставляет пользовательский агент сериализовать фрагмент HTML или XML, состоящий из потомков элемента. Возвращается результирующая строка.

let contents = myElement.innerHTML;

Это позволяет просмотреть разметку HTML узлов содержимого элемента.

Установка значения innerHTML позволяет легко заменить существующее содержимое элемента новым контентом.

Например, вы можете стереть всё содержимое документа, очистив содержимое атрибута body документа:

document.body.textContent = "";

В этом примере извлекается текущая разметка HTML документа и заменяет символы "<" на ссылку на символ "<", по существу преобразуя HTML в обычный текст. Затем это обертывается в элемент <pre>. Затем значение innerHTML изменяется на эту новую строку. В результате содержимое документа заменяется отображением всего исходного кода страницы.

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(
  /</g,
  "&lt;",
)}</pre>`;

Детали работы

Что именно происходит при установке значения innerHTML? Пользовательский агент выполняет следующие действия:

1. Указанное значение парсится как HTML или XML (в зависимости от типа документа), что приводит к объекту DocumentFragment, представляющему новый набор узлов DOM для новых элементов.
2. Если элемент, содержимое которого заменяется, является элементом <template>, то атрибут content элемента <template> заменяется новым DocumentFragment созданным на шаге 1.
3. Для всех остальных элементов содержимое элемента заменяется узлами в новом DocumentFragment.

Установка значения innerHTML позволяет добавить новое содержимое к существующему содержимому элемента.

Например, мы можем добавить новый элемент списка (<li>) в существующий список (<ul>):

HTML

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

JavaScript

const list = document.getElementById("list");

list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;

Обратите внимание, что использование innerHTML для добавления HTML-элементов (например, el.innerHTML += "<a href='…'>link</a>") приведёт к удалению всех ранее установленных обработчиков событий. То есть, после добавления любого HTML-элемента таким способом, вы не сможете прослушивать ранее установленные обработчики событий.

Использование innerHTML для вставки текста в веб-страницу нередко встречается. Существует возможность, что это станет вектором атаки на сайт, создавая потенциальный риск безопасности.

let 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

Хотя это может выглядеть как атака межсайтового скриптинга, результат безобиден. HTML определяет, что тег <script>, вставленный с помощью innerHTML не должен выполняться.

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

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

По этой причине вместо innerHTML рекомендуется использовать:

• Node.textContent, когда требуется вставить простой текст, так как это вставляет его как обычный текст, а не парсит его как HTML.

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

function log(msg) {
  const logElem = document.querySelector(".log");

  const time = new Date();
  const 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) {
  const msg = `Event <strong>${event.type}</strong> at <em>${event.clientX}, ${event.clientY}</em>`;
  log(msg);
}

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

const 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 довольно прост в данном примере.

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

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

Следующий 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;
}

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

• Node.textContent и HTMLElement.innerText
• Element.insertAdjacentHTML()
• Element.outerHTML
• Парсинг HTML или XML в дерево DOM: DOMParser
• Сериализация дерева DOM в строку XML: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()