path: root/files/ru/web/api/element/innerhtml/index.html

---
title: Element.innerHTML
slug: Web/API/Element/innerHTML
translation_of: Web/API/Element/innerHTML
---
<div>{{APIRef("DOM")}}</div>

<p>Свойство интерфейса {{domxref("Element")}} <strong><code>innerHTML</code></strong> устанавливает или получает HTML или XML разметку дочерних элементов.</p>

<div class="note"><strong>Примечание: </strong>Если узлы {{HTMLElement("div")}}, {{HTMLElement("span")}}, или {{HTMLElement("noembed")}} имеют дочерние текстовые узлы, содержащие символы <code>(&amp;), (&lt;),</code> или <code>(&gt;)</code>, <code>innerHTML</code> вернет эти символы как &amp;amp, &amp;lt и &amp;gt соответсвенно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. </div>

<p> Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush: js notranslate">const <var>content</var> = <var>element</var>.innerHTML;

<var>element</var>.innerHTML = <var>htmlString</var>;
</pre>

<h3 id="Value">Value</h3>

<p>Строка {{domxref("DOMString")}}, которая содержит части HTML разметки. Установка значения <code>innerHTML</code> удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке <var>htmlString.</var></p>

<h3 id="Исключения">Исключения</h3>

<dl>
 <dt><code>SyntaxError</code></dt>
 <dd>Возникает при попытке установить значение <code>innerHTML</code> строкой, в которой содержится неправильно сформированный HTML.</dd>
 <dt><code>NoModificationAllowedError</code></dt>
 <dd>Возникает при попытке вставить HTML в узел, у которого родителем является {{domxref("Document")}}.</dd>
</dl>

<h2 id="Примечания">Примечания</h2>

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

<pre class="brush: js notranslate">document.body.innerHTML = "";  // Заменяет содержимое тела пустой строкой.</pre>

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

<pre class="brush: js notranslate">// Скопируйте и вставьте в адресную строку в виде одной строки.
javascript:"&lt;pre&gt;"+document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") + "&lt;/pre&gt;";
</pre>

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

<h3 id="Соображения_безопасности">Соображения безопасности</h3>

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

<pre class="brush: js notranslate">const name = "John";
// предполагая, что 'el' является HTML DOM элементом.
el.innerHTML = name; // безвредный в этом случае

// ...

name = "&lt;script&gt;alert('Я Джон в раздражающем alert!')&lt;/script&gt;";
el.innerHTML = name; // безвредный в этом случае</pre>

<p>Хотя это может выглядеть как атака {{interwiki("wikipedia", "cross-site scripting")}}, результат безопасный. HTML5 указывает на тег {{HTMLElement("script")}} вставленный через InnerHTM <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">должен не выполнится.</a></p>

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

<pre class="brush: js notranslate">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
el.innerHTML = name; // показывает alert</pre>

<p>По этой причине,  рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте {{domxref("node.textContent")}}. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. </p>

<h2 id="Примеры">Примеры</h2>

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

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js notranslate">function log(msg) {
  var logElem = document.querySelector(".log");

  var time = new Date();
  var timeStr = time.toLocaleTimeString();
  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
}

log("Регистрация событий мыши внутри этого контейнера...");</pre>

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

<p>Мы добавляем второй метод, который логгирует информацию о событиях на основе {{domxref("MouseEvent")}} (например, {{event("mousedown")}}, {{event("click")}}, и {{event("mouseenter")}}):</p>

<pre class="brush: js notranslate">function logEvent(event) {
  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
  log(msg);
}</pre>

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

<pre class="brush: js notranslate">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);</pre>

<h3 id="HTML">HTML</h3>

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

<pre class="brush: html notranslate">&lt;div class="box"&gt;
  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
  &lt;div class="log"&gt;&lt;/div&gt;
&lt;/div&gt;</pre>

<p>{{HTMLElement("div")}} c классом <code>"box"</code> – просто контейнер для, который даст содержимому пространство вокруг себя. <code>&lt;div&gt;</code> с классом <code>"log"</code> является контейнером для логгирования текста внутри себя.</p>

<h3 id="CSS">CSS</h3>

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

<pre class="brush: css notranslate">.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;
}</pre>

<h3 id="Результат">Результат</h3>

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

<p>{{EmbedLiveSample("Example", 640, 350)}}</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}</td>
   <td>{{Spec2('DOM Parsing')}}</td>
   <td>Первоначальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a class="external" href="http://innerdom.sourceforge.net/"><code>innerDOM</code></a> - Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определенное как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.</li>
 <li>{{domxref("Element.insertAdjacentHTML")}} - <span id="result_box" lang="ru"><span>Альтернатива для innerHTML, позволяющая добавлять новый HTML</span></span>.</li>
 <li><a class="external" href="https://github.com/ndebeiss/jsxmlsaxparser">jssaxparser</a> -  Более надежным (хотя и более тяжелым) решением, чем innerDOM (поддерживает парсинг с пространствами имен, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку <a href="https://app.assembla.com/spaces/brettz9/bize6mebSr3B31ab7jnrAJ/source/DOMToString">значительно проще</a>).</li>
 <li>Эффективность соображений: <a class="external" href="http://www.quirksmode.org/dom/innerhtml.html">quirksmode.</a></li>
</ul>