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

insertAdjacentHTML() разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы, что предотвращает дополнительную сериализацию и поэтому работает быстрее, чем манипуляции с {{domxref("Element.innerHTML", "innerHTML")}}.

+ +

Синтаксис

+ +
targetElement.insertAdjacentHTML(position, text);
+ +

Параметры

+ +
+
position
+
{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру): +
    +
  • 'beforebegin': до самого element (до открывающего тега).
    • +
  • 'afterbegin': сразу после открывающего тега  element (перед первым потомком).
    • +
  • 'beforeend': сразу перед закрывающим тегом element (после последнего потомка).
    • +
  • 'afterend': после element (после закрывающего тега).
    • +
+
+
text
+
Строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.
+
+ +

Наглядное отображение параметра position

+ +
+
+
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+
+
+ +
Примечание:  позиции beforebegin и afterend работают только если узел имеет родительский элемент.
+ +

Пример

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// At this point, the new structure is:
+// <div id="one">one</div><div id="two">two</div>
+ +

Примечания

+ +

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

+ +

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

+ +

Не рекомендуется использовать insertAdjacentHTML(), когда требуется ввести простой текст. Используйте для этого свойство {{domxref("Node.textContent")}} или метод {{domxref("Element.insertAdjacentText()")}}. Они не будут интерпретировать текст как HTML, а вставят необработанный текст.

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

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

+ +

hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.

-- cgit v1.2.3-54-g00ecf