Enter
    Расширенный поиск
    Клавиша / esc

    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>

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

document.body.innerHTML = divEl

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

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

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

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

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

    Так же не рекомендуется использовать innerHTML, если нужно просто изменить текст в элементе. Для этой задачи есть свойство innerText или 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("Теперь вы точно взломаны!")">'

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