`.innerHTML`

Время чтения: меньше 5 мин

Кратко

Свойство Element.innerHTML позволяет считать содержимое элемента в виде HTML-строки или установить новый HTML. Новое значение HTML необходимо передавать в виде строки и оно заменит текущее содержимое элемента. При передаче невалидной HTML-строки будет выброшена ошибка. HTML-строкой является строка, которая содержит валидную HTML-разметку, в Element.innerHTML нельзя передать DOM-элемент.

Пример

        
          
          <form>  <label>Логин</label>  <input type="text" id="login" />  <div class="error">Введите логин</div></form>
          <form>
  <label>Логин</label>
  <input type="text" id="login" />
  <div class="error">Введите логин</div>
</form>

        
          
          const form = document.querySelector('form')console.log(form.innerHTML)// Выведет "<label>Логин</label><input type="text" id="login" /><div class="error">Введите логин</div>"form.innerHTML = '<div class="success">Вход выполнен</div>' // Меняем содержимое новым html
          const form = document.querySelector('form')

console.log(form.innerHTML)
// Выведет "<label>Логин</label><input type="text" id="login" /><div class="error">Введите логин</div>"

form.innerHTML = '<div class="success">Вход выполнен</div>' // Меняем содержимое новым html

HTML после изменения:

        
          
          <form>  <div class="success">Вход выполнен</div></form>
          <form>
  <div class="success">Вход выполнен</div>
</form>

Открыть демо в новой вкладке

Как понять

Браузер предоставляет разработчику возможность управлять содержимым на странице и менять его как угодно. Element.innerHTML – самый простой способ считать или изменить HTML-содержимое элемента. Это свойство использует строки, что даёт возможность легко менять и очищать содержимое элементов.

Когда в Element.innerHTML присваивается новое значение, все предыдущее содержимое удаляется и создаётся новое, что приводит к перерисовке страницы.

Как пишется

Обращение к свойству Element.innerHTML вернёт содержимое элемента в виде HTML-строки. Просмотреть или изменить содержимое можно у всех элементов, включая <html> и <body>. Присвоение нового значения к свойству очистит всё текущее содержимое и заменит его новым HTML.

        
          
          document.body.innerHTML = '<h1>Hello Inner HTML!<h1>'
          document.body.innerHTML = '<h1>Hello Inner HTML!<h1>'

В результате в документ будет вставлен HTML:

        
          
          <h1>Hello Inner HTML!<h1>
          <h1>Hello Inner HTML!<h1>

        
          
          const div = document.createElement('div'); // <-- Здесь создается полноценный DOM-элементdocument.body.innerHTML = div // В body не вставится элемент
          const div = document.createElement('div'); // <-- Здесь создается полноценный DOM-элемент

document.body.innerHTML = div // В body не вставится элемент

Так как в div находится объект DOM-элемента, то при присвоении в Element.innerHTML он приведётся к строке, в результате в элемент вставится строка "[object HTMLDivElement]".

        
          
          <body>[object HTMLDivElement]<body>
          <body>[object HTMLDivElement]<body>

Если передать в Element.innerHTML строку с невалидным HTML, то будет выброшена ошибка. Однако большинство современных браузеров помогают разработчику, умеют самостоятельно дополнять разметку (например если забыли закрыть тег) и даже дают возможность для кастомных тегов. Потому встретить ошибку при передаче в Element.innerHTML невалидного HTML очень сложно.

☝️

Несмотря на то, что с помощью Element.innerHTML вставить любой HTML, есть некоторые ограничения, связанные с безопасностью веб-приложений.

Если передать в Element.innerHTML строку с тегом <script>, то элемент успешно вставится в страницу, но скрипт, который содержится внутри не исполнится. Но исполнить вредоносный код возможно и без тега <script>. Потому не рекомендуется вставлять с помощью Element.innerHTML любой HTML из ненадёжных источников. Например, если вы получаете разметку с неизвестного сервера.

Так же не рекомендуется использовать Element.innerHTML, если нужно просто изменить текст в элементе. Для этой задачи есть свойство Element.innerText или Element.textContent.

        
          
          // Скрипт станет частью body, но не выполнитсяdocument.body.innerHTML = '<script>alert("Мы не смогли вас взломать :(")</script>'// После вставки в html картинка не загрузится и тогда сработает код из onerrordocument.body.innerHTML = '<img src="broken-link" onerror="alert("Теперь вы точно взломаны!")">'
          // Скрипт станет частью body, но не выполнится
document.body.innerHTML = '<script>alert("Мы не смогли вас взломать :(")</script>'

// После вставки в html картинка не загрузится и тогда сработает код из onerror
document.body.innerHTML = '<img src="broken-link" onerror="alert("Теперь вы точно взломаны!")">'