MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

Синтаксис

const content = element.innerHTML;

В свою очередь, content содержит сериализованный HTML код описывающий все дочерние элементы.

 element.innerHTML = content;

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

Пример

<html>
  <head></head>
  <body>
    <div id="txt">
      <script     id="txt0"> x=0> </script>
        <noembed    id="txt1"> 1   </noembed>
        <noframes   id="txt2"> 2   </noframes>
        <noscript   id="txt3"> 3   </noscript>
        <div        id="txt4"> 4   </div>
        <div>
          <noscript id="txt5"> 5   </noscript>
        </div>
        <span       id="txt6"> 6   </span>
      </div>

      <div id="innerHTMLtxt"></div>
    <div id="textContenttxt"><div>

    <script> 
    for (let i = 0; i < 7; i++) { 
      x = "txt" + i;
      document.getElementById(x).firstChild.nodeValue = '&<>'
    }

    document.getElementById("innerHTMLtxt").textContent =
        document.getElementById("txt").innerHTML
    document.getElementById("textContenttxt").textContent =
        document.getElementById("txt").textContent
    </script>
  <body>
</html>
// HTML:
// <div id="d"><p>Content</p>
// <p>Further Elaborated</p>
// </div>

const d = document.getElementById("d");
dump(d.innerHTML);

// the string "<p>Content</p><p>Further Elaborated</p>"
// is dumped to the console window

Примечания

Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента 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, но вместо этого он вставляется как не обработанный текст. 

Specification

Specification Status Comment
DOM Parsing and Serialization
Определение 'Element.innerHTML' в этой спецификации.
Рабочий черновик Initial definition

See also

  • 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 - An alternative for innerHTML, allowing you to append the new HTML, instead of replacing it.
  • 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
  • MSDN: innerHTML Property

Метки документа и участники

 Внесли вклад в эту страницу: SergKorol
 Обновлялась последний раз: SergKorol,