From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/element/innerhtml/index.html | 167 ++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/ru/web/api/element/innerhtml/index.html (limited to 'files/ru/web/api/element/innerhtml/index.html') diff --git a/files/ru/web/api/element/innerhtml/index.html b/files/ru/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..60af461354 --- /dev/null +++ b/files/ru/web/api/element/innerhtml/index.html @@ -0,0 +1,167 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

Свойство интерфейса {{domxref("Element")}} innerHTML устанавливает или получает HTML или XML разметку дочерних элементов.

+ +
Примечание: Если узлы {{HTMLElement("div")}}, {{HTMLElement("span")}}, или {{HTMLElement("noembed")}} имеют дочерние текстовые узлы, содержащие символы (&), (<), или (>), innerHTML вернет эти символы как &amp, &lt и &gt соответсвенно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. 
+ +

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

+ +

Синтаксис

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Value

+ +

Строка {{domxref("DOMString")}}, которая содержит части HTML разметки. Установка значения innerHTML удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке htmlString.

+ +

Исключения

+ +
+
SyntaxError
+
Возникает при попытке установить значение innerHTML строкой, в которой содержится неправильно сформированный HTML.
+
NoModificationAllowedError
+
Возникает при попытке вставить HTML в узел, у которого родителем является {{domxref("Document")}}.
+
+ +

Примечания

+ +

Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:

+ +
document.body.innerHTML = "";  // Заменяет содержимое тела пустой строкой.
+ +

Свойство innerHTML многих типов элементов, включая {{HTMLElement("body")}} или {{HTMLElement("html")}}, могут быть возвращены или перемещены. Это может так же быть использовано для просмотра кода страницы, которая была изменена динамически:

+ +
// Скопируйте и вставьте в адресную строку в виде одной строки.
+javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";
+
+ +

Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введен текст в поле ввода <input>, IE меняет значение атрибута <input> свойства innerHTML, но браузеры Gecko не делают этого.

+ +

Соображения безопасности

+ +

Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.

+ +
const name = "John";
+// предполагая, что 'el' является HTML DOM элементом.
+el.innerHTML = name; // безвредный в этом случае
+
+// ...
+
+name = "<script>alert('Я Джон в раздражающем alert!')</script>";
+el.innerHTML = name; // безвредный в этом случае
+ +

Хотя это может выглядеть как атака {{interwiki("wikipedia", "cross-site scripting")}}, результат безопасный. HTML5 указывает на тег {{HTMLElement("script")}} вставленный через InnerHTM должен не выполнится.

+ +

Однако, есть способы запустить JavaScript без использования элементов {{HTMLElement("script")}}, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // показывает alert
+ +

По этой причине,  рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте {{domxref("node.textContent")}}. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. 

+ +

Примеры

+ +

Этот пример использует innerHTML для создания механизма логгирования сообщений внутри элемента на странице.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Регистрация событий мыши внутри этого контейнера...");
+ +

Функция log() создаёт сообщение получая текущее время из объекта {{jsxref("Date")}}, используя {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, и соединяя стороку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом "log".

+ +

Мы добавляем второй метод, который логгирует информацию о событиях на основе {{domxref("MouseEvent")}} (например, {{event("mousedown")}}, {{event("click")}}, и {{event("mouseenter")}}):

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Затем мы используем этот обработчик событий на элементе, который содержит наше логгирование, для каждого события мыши:

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

HTML довольно простой для нашего примера.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

{{HTMLElement("div")}} c классом "box" – просто контейнер для, который даст содержимому пространство вокруг себя. <div> с классом "log" является контейнером для логгирования текста внутри себя.

+ +

CSS

+ +

Для нашего примера используем следующие CSS стили.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Результат

+ +

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

+ +

{{EmbedLiveSample("Example", 640, 350)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}Первоначальное определение
+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf