.innerHTML

Читаем и изменяем содержание HTML-элемента.

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

Кратко

Секция статьи "Кратко"

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

Новое значение HTML необходимо передавать в виде строки и оно заменит текущее содержимое элемента. При передаче невалидной HTML-строки будет выброшена ошибка. HTML-строкой является строка, которая содержит валидную HTML-разметку, в 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>'// Меняем содержимое новым htmlform.innerHTML = '<div class="success">Вход выполнен</div>'
          const form = document.querySelector('form')

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

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

        
        
          
        
      

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

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

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

Как понять

Секция статьи "Как понять"

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

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

Как пишется

Секция статьи "Как пишется"

Обращение к свойству 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 divEl = document.createElement('div') // <-- Здесь создается полноценный DOM-элементdocument.body.innerHTML = divEl
          const divEl = document.createElement('div') // <-- Здесь создается полноценный DOM-элемент

document.body.innerHTML = divEl

        
        
          
        
      

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

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

        
        
          
        
      

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

        
          
          // Скрипт станет частью 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("Теперь вы точно взломаны!")">'