В Javascript у нас есть много разных способов манипулировать элементами DOM. Элементы DOM — это элементы HTML, которые мы определяем, когда пишем наши скрипты. Как только мы нацеливаемся на конкретный элемент DOM, часто бывает полезно установить его содержимое с новым содержимым HTML или получить его содержимое HTML для использования в другом месте.
Для этого мы используем innerHTML. Все элементы типа DOM Javascript имеют прикрепленное свойство innerHTML. Выбор HTML-элементов с помощью Javascript можно подробно изучить здесь, однако самый простой способ — использовать такой метод, как getElementById:
let getElement = document.getElementById('my-element')
Здесь Javascript будет искать элемент с идентификатором #my-element в HTML-содержимом вашей страницы. Если он существует, он вернет HTMLElement, который будет содержать свойство innerHTML:
let getElement = document.getElementById('my-element')
console.log(getElement.innerHTML)
Теперь мы можем легко получить содержимое HTML, включая текст, из #my-element. Примечание: если вы используете querySelectorAll для выбора элементов HTML, будет возвращено несколько HTMLElement, поэтому убедитесь, что вы выбираете только один.
Настройка HTML-элементов innerHTML
Помимо получения innerHTML из элемента, мы также можем переопределить его по своему усмотрению. Например, ниже мы можем установить содержимое наших элементов как просто тег <h1>:
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, вы можете сделать что-то вроде этого:
let getElement = document.getElementById('my-element')
getElement.innerHTML = '<h1>Hello World</h1>' + getElement.innerHTML
Приведенный выше код добавит тег <h1> над остальным вашим контентом, сохраняя при этом существующий контент.
Заключение
innerHTML — это распространенный инструмент для управления или получения HTML-контента из элемента. Он широко используется, и его легко понять. Хотя существуют некоторые проблемы с безопасностью в отношении вставки HTML, во многих случаях это допустимый метод. Чтобы узнать больше о Javascript, вы можете ознакомиться с моим руководством здесь.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
