Понимание innerHTML в Javascript

В Javascript у нас есть много разных способов манипулировать элементами DOM. Элементы DOM — это элементы HTML, которые мы определяем, когда пишем наши скрипты. Когда мы нацеливаемся на определенный элемент DOM, часто бывает полезно установить его содержимое с новым содержимым HTML или получить его содержимое HTML для использования в другом месте.

Для этого мы используем innerHTML. Все элементы Javascript типа DOM имеют присоединенное свойство innerHTML. Подробнее о выборе элементов HTML с помощью Javascript можно узнать здесь, однако Самый простой способ — использовать такой метод, как getElementById: n

let getElement = document.getElementById('my-element')

Здесь Javascript будет искать элемент с идентификатором #my-element в HTML-содержимом вашей страницы. Если он существует, он вернет HTMLElement, который будет содержать свойство innerHTML: n

let getElement = document.getElementById('my-element')

console.log(getElement.innerHTML)

Теперь мы можем легко получить содержимое HTML, включая текст, из #my-element. Примечание: если вы используете querySelectorAll для выбора HTML-элементов, будет возвращено несколько HTMLElement, поэтому убедитесь, вы выбираете только один.

Настройка HTML-элементов innerHTML

Помимо получения innerHTML из элемента, мы также можем переопределить его по своему усмотрению. Например, ниже мы можем указать, что содержимое наших элементов будет просто тегом <h1>: n

let getElement = document.getElementById('my-element')
getElement.innerHTML = '<h1>Hello World</h1>'

Содержимое, которое мы передаем в innerHTML, будет проанализировано как HTML и отображено пользователю. При этом следует учитывать две вещи:

* Если, например, вы делаете это через API, и кто-то может отправить содержимое для отображения на странице, вы можете столкнуться с некоторыми проблемами безопасности. Поэтому вам нужно быть осторожным при использовании этого, чтобы в конечном итоге кто-то не взломал и не отправил случайный контент или вредоносный код многим пользователям. * Это заменит все содержимое внутри HTML-элемента, что может быть не тем, что вам нужно.

Проблемы безопасности при использовании innerHTML

Что касается проблем безопасности, если вы беспокоитесь об использовании этого метода для установки HTML, вы можете использовать setHTML(), который очистит ввод и удалит любой недействительный HTML (в отличие от innerHTML). Он также удаляет код, который считает небезопасным. В качестве альтернативы вы можете использовать textContent, однако это не позволит вам добавить HTML или скрипты в тег.

Для базовых манипуляций, когда вы полностью контролируете то, что делается, можно использовать innerHTML с относительно небольшими проблемами. Итак, наконец, вы хотите добавить содержимое внутри вашего HTML-элемента в дополнение к тому, что уже есть, вместо того, чтобы заменять его при использовании innerHTML, вы можете сделать что-то вроде этого: n

let getElement = document.getElementById('my-element')
getElement.innerHTML = '<h1>Hello World</h1>' + getElement.innerHTML

Приведенный выше код добавит тег <h1> поверх остального контента, сохраняя при этом существующий контент.

Заключение

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

Также опубликовано здесь