Источник

.inner H T M L

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

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

Пример

Скопировать ссылку «Пример» Скопировано

   Логин  
Введите логин  form> label>Логинlabel> input type="text" id="login" /> div class="error">Введите логинdiv> form>    Скопировать Скопировано Не удалось скопировать   

 const form = document.querySelector('form') console.log(form.innerHTML)// 'Логин
Введите логин
' // Меняем содержимое новым htmlform.innerHTML = '
Вход выполнен
' const form = document.querySelector('form') console.log(form.innerHTML) // 'Логин
Введите логин
' // Меняем содержимое новым html form.innerHTML = '
Вход выполнен
'    Скопировать Скопировано Не удалось скопировать   

   
Вход выполнен  form> div class="success">Вход выполненdiv> form>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

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

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Обращение к свойству inner H T M L вернёт содержимое элемента в виде HTML-строки. Просмотреть или изменить содержимое можно у всех элементов, включая и . Присвоение нового значения к свойству очистит всё текущее содержимое и заменит его новым HTML.

 document.body.innerHTML = 'Hello Inner HTML!' document.body.innerHTML = 'Hello Inner HTML!'    Скопировать Скопировано Не удалось скопировать   

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

 
Hello Inner HTML! h1>Hello Inner HTML!h1>    Скопировать Скопировано Не удалось скопировать   

Стоит помнить, что строка с HTML-разметкой это не DOM-элемент. inner H T M L работает только со строками, самостоятельно разбирает её содержимое и создаёт элементы.

 const divEl = document.createElement('div') // document.body.innerHTML = divEl const divEl = document.createElement('div') // document.body.innerHTML = divEl   Скопировать Скопировано Не удалось скопировать   

Так как в div El находится объект DOM-элемента, то при присвоении в inner H T M L он приведётся к строке, в результате в элемент вставится строка » [ object H T M L Div Element ] » .

 [object HTMLDivElement] body>[object HTMLDivElement]body>    Скопировать Скопировано Не удалось скопировать   

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

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

Так же не рекомендуется использовать inner H T M L , если нужно просто изменить текст в элементе. Для этой задачи есть свойство inner Text или text Content .

 // Скрипт станет частью body, но не выполнитсяdocument.body.innerHTML = '' // После вставки в html картинка не загрузится и тогда сработает код из onerrordocument.body.innerHTML = ' ' // Скрипт станет частью body, но не выполнится document.body.innerHTML = '' // После вставки в html картинка не загрузится и тогда сработает код из onerror document.body.innerHTML = ' '    Скопировать Скопировано Не удалось скопировать   

Источник

HTML DOM — Изменение HTML Элементов

HTML элементы можно изменять, используя JavaScript, HTML DOM и события.

Изменить HTML Элемент

HTML DOM и JavaScript могут изменять внутреннее содержимое и атрибуты HTML элементов.

Следующий пример изменяет цвет фона элемента :

Пример

Изменить Текст HTML Элемента — innerHTML

Простейший способ получить и модифицировать содержимое элемента — использование свойства innerHTML.

Следующий пример изменяет текст элемента

:

Пример

Изменить HTML Элемент Используя События

Обработчик события позволяет вам выполнить код, когда происходит событие.

События генерируются браузером, когда пользователь кликает на элементе, загружается страница, данные с формы отправляются на обработку и т.д.

Вы можете прочитать больше о событиях в следующем уроке.

Следующий пример изменяет цвет фона элемента при нажатии кнопки:

Пример

Изменить Текст Элемента — с помощью Функции

Следующий пример использует функцию для изменения текста элемента

при нажатии кнопки:

Пример

Использование Объекта Стиля (style)

Объект style (стиль) каждого HTML элемента представляет его индивидуальный стиль.

Следующий пример использует функцию для изменения стиля элемента при нажатии кнопки:

Пример

Изменить шрифт и цвет Элемента

Следующий пример использует функцию для изменения стиля элемента

при нажатии кнопки:

Источник

Меняем текстовое содержимое элемента

Мы нашли нужный элемент и вывели в консоль его текстовое содержимое. Но для нашей задачи это содержимое нужно изменить. Как это сделать? Присвоим свойству textContent новое значение.

Здесь могла быть ваша реклама.

И перезапишем его текстовое содержимое:

let paragraph = document.querySelector('p'); paragraph.textContent = 'Здесь был Кекс. Мяу!';

Обратите внимание, что строки с текстом нужно заключать в кавычки.

Когда инструкция выполнится, текст внутри абзаца изменится:

Когда мы присваиваем свойству textContent новое значение, оно полностью заменяет собой старое. Как и в случае с переключением классов, JavaScript не влияет на исходную разметку, а меняет текст прямо в браузере пользователя.

Свойство textContent предназначено только для текста, если записать туда HTML-теги, браузер их не поймёт.