/ ↲
    Расширенный поиск

    JavaScript

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

    Читайте также