Element.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 очень сложно.

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