Источник

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

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

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

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

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

Пример

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

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

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

:

Пример

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

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

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

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

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

Пример

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

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

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

Пример

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

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

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

Пример

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

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

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

Источник

JavaScript HTML DOM Изменение HTML

HTML DOM позволяет JavaScript изменять содержимое элементов HTML.

Изменение потока вывода HTML

JavaScript может создавать динамический HTML контент:

В JavaScript document.write() можно использовать для записи непосредственно в выходной поток HTML:

Пример

Никогда не используйте document.write() после загрузки документа. Это перезапишет документ.

Изменение содержимого HTML

Самый простой способ изменить содержимое HTML элемента — использовать innerHTML свойство.

Чтобы изменить содержимое элемента HTML, используйте этот синтаксис:

В этом примере изменяется содержимое

элемента:

Пример

• HTML документ выше содержит

  элемент с id=»p1″

• Мы используем HTML DOM, чтобы получить элемент с id=»p1″
• JavaScript изменяет содержимое ( innerHTML ) этого элемента на «Новый текст!»

В этом примере изменяется содержимое элемента:

Пример

• HTML документ выше содержит элемент с id=»id01″
• Мы используем HTML DOM, чтобы получить элемент с id=»id01″
• JavaScript изменяет содержимое ( innerHTML ) этого элемента на «Новый заголовок»

Изменение значения атрибута

Чтобы изменить значение атрибута HTML, используйте этот синтаксис:

В этом примере изменяется значение атрибута src элемента:

Пример

• HTML документ выше содержит элемент с id=»myImage»
• Мы используем HTML DOM, чтобы получить элемент с id=»myImage»
• JavaScript изменяет src атрибут этого элемента с «smiley.gif» на «landscape.jpg»

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

.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 = ' '    Скопировать Скопировано Не удалось скопировать   

Источник