В этом руководстве вы узнаете, как использовать свойство элемента JavaScript innerHTML для получения или установки HTML-разметки, содержащейся в элементе.
innerHTML — это свойство Element, которое позволяет получить или установить HTML-разметку, содержащуюся в элементе.
Синтаксис:
let content = element.innerHTML;
Когда вы читаете innerHTML элемента, веб-браузер должен сериализовать HTML-фрагмент потомков элемента.
1) Простой пример
Предположим, что у вас есть следующая разметка:
<ul id="menu">
<li>Home</li>
<li>Services</li>
</ul>В данном примере используется свойство innerHTML для получения содержимого элемента <ul> :
let menu = document.getElementById('menu');
console.log(menu.innerHTML);Как это работает:
- Сначала выберите элемент
<ul>по его идентификатору(menu), используя методgetElementById(). - Затем получите содержимое HTML элемента
<ul>с помощьюinnerHTML.
Выход:
<li>Home</li> <li>Services</li>
2) Изучение текущего источника HTML
Свойство innerHTML возвращает текущий исходный HTML-код документа, включая все изменения, внесенные с момента загрузки страницы.
См. пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript innerHTML</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Services</li>
</ul>
<script>
let menu = document.getElementById('menu');
// create new li element
let li = document.createElement('li');
li.textContent = 'About Us';
// add it to the ul element
menu.appendChild(li);
console.log(menu.innerHTML);
</script>
</body>
</html>Выход:
<li>Home</li> <li>Services</li> <li>About Us</li>
Как это работает.
- Во-первых, получите элемент
<ul>сmenuid, используя методgetElementById(). - Во-вторых, создайте новый элемент
<li>и добавьте его к элементу<ul>с помощью методовcreateElement()иappendChild(). - В-третьих, получите HTML-код элемента
<ul>, используя свойствоinnerHTMLэлемента<ul>. Содержимое элемента<ul>включает исходное содержимое и динамическое содержимое, созданное JavaScript.
Установка свойства innerHTML
Чтобы установить значение свойства innerHTML, используйте этот синтаксис:
element.innerHTML = newHTML;
Параметр заменит существующее содержимое элемента новым содержимым.
Например, вы можете удалить все содержимое документа, очистив содержимое элемента document.body :
document.body.innerHTML = '';
Угроза безопасности
HTML5 указывает, что тег <script>, вставленный с помощью innerHTML, не должен выполняться. См. следующий пример:
документ index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript innerHTML</title>
</head>
<body>
<div id="main"></div>
<script src="app.js"></script>
</body>
</html>
app.js
const main = document.getElementById('main');
const scriptHTML = '<script>alert("Alert from innerHTML");</script>';
main.innerHTML = scriptHTML;
В этом примере alert() внутри <script> не будет выполняться.
Однако, если вы измените исходный код app.js на следующий:
const main = document.getElementById('main');
const externalHTML = `<img src='1' onerror='alert("Error loading image")'>`;
// shows the alert
main.innerHTML = externalHTML;
alert() будет отображаться, потому что изображение не может быть успешно загружено. Это вызывает выполнение обработчика onerror. И этот обработчик может выполнять любой вредоносный код, а не просто оповещение.
Таким образом, вы не должны устанавливать innerHTML для контента, который вы не можете контролировать, иначе вы столкнетесь с потенциальной угрозой безопасности.
По этой причине, если вы хотите вставить в документ обычный текст, вы используете свойство textContent вместо innerHTML. textContent будет анализироваться не как HTML, а как необработанный текст.
Заключение
- Используйте свойство
innerHTMLдляElement, чтобы получить или установить HTML, содержащийся в элементе. - Свойство возвращает текущий HTML-источник элемента, включая все изменения, внесенные с момента загрузки страницы.
- Не используйте
innerHTMLдля установки нового содержимого, которое вы не можете контролировать, чтобы избежать риска безопасности.