Document body innerhtml javascript

Поддержка браузерами

Описание

Свойство innerHTML представляет собой содержимое элемента (элементы-потомки, комментарии, текст и т.д.), которое хранится в нём в виде строки. Свойство доступно для чтения и записи, поэтому у нас есть возможность получать и изменять содержимое элемента.

Примечание: если текстовый узел элемента содержит символы "&", " ", то свойство innerHTML преобразует эти символы в "&", " " соответственно. Для получения правильной копии содержимого текстового узла используйте свойство textContent.

Синтаксис

При установке нового содержимого, сначала удаляется старое содержимое элемента, и только затем устанавливается новое.

Обратите внимание, свойство innerHTML отсутствует у пустых элементов, его можно применять только с теми элементами, которые имеют открывающий и закрывающий тег.

Определение и применение

JavaScript свойство innerHTML объекта Element позволяет установить или возвратить содержимое элемента. Свойство предназначено для работы с HTML или XML разметкой.

Обращаю Ваше внимание на то, что если узел

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

Поддержка браузерами

Свойство Chrome Firefox Opera Safari IExplorer Edge
innerHTML Да Да Да Да Да Да

JavaScript синтаксис:

Установка значения свойством innerHTML удаляет все потомки элемента и заменяет их узлами, построенными путем синтаксического анализа HTML, заданного в переданном значении.

Версия JavaScript

Исключения

Тип исключения Описание
SYNTAX_ERR Возникает в том случае, если была предпринята попытка установить значение innerHTML с помощью строки, которая не является правильно сформированным HTML.
NoModificationAllowedError Возникает в том случае, если предпринята попытка вставить HTML код в узел, родительским элементом которого является Document .
Читайте также:  Ds4windows не видит dualshock 4

Пример использования

В этом примере мы с использованием атрибута событий onclick при нажатии на первую кнопку (HTML элемент ) вызываем функцию myFunc() , которая с использованием JavaScript метода unshift() добавляет значение элемента в начало массива, содержащего имена животных в виде строковых данных и добавляет новое содержимое этого массива в элемент

с глобальным атрибутом id animals.

При нажатии на вторую кнопку с использованием атрибута событий onclick вызываем функцию myFunc2() , которая с использованием JavaScript метода push() добавляет значение элемента в конец массива, содержащего имена животных в виде строковых данных и добавляет новое содержимое этого массива в элемент

с глобальным атрибутом id animals.

Результат нашего примера:

Пример использования JavaScript свойства innerHTML JavaScript Element

для замены во всем документе ‘test1’ на ‘test2’. Строка ‘test1’ может встречаться в тегах a, div, script с различными классами и id. Проблема в том, что после выполнения замены перестают работать все js формы на странице. Прочитал, что это вроде как из-за того, что document.body.innerHTML стирает все DOM-события. А как тогда сделать замену, чтобы страницы оставалась интерактивной?

  • Вопрос задан 05 апр. 2019
  • 255 просмотров

Не перезаписывать innerHTML, а перебрать нужные элементы, проверить есть ли у них такая строка, и если есть сделать замену для textContent.
Еще и быстрее получится.

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

(и вообще, вы что-то странное делаете о_О)