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

{{APIRef("DOM")}}

+ +

Метод insertAdjacentElement() добавляет переданный элемент в DOM-дерево относительно элемента, вызвавшего метод.

+ +

Синтаксис

+ +
targetElement.insertAdjacentElement(position, element);
+ +

Параметры

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

Возвращаемое значение

+ +

Метод возвращает добавляемый элемент, либо null, если добавление элемента завершилось ошибкой.

+ +

Исключения

+ + + + + + + + + + + + + + + + + + +
ИсключениеПояснение
SyntaxErrorПереданное значение position не соответствует ни одному из допустимых.
TypeErrorПередаваемый element не является валидным.
+ +

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

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

Примеры

+ +
beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});
+ +

Посмотрите наше демо insertAdjacentElement.html на Github (так же посмотрите исходный код). В этом демо мы имеем последовательность {{htmlelement("div")}} элементов внутри контейнера. При выборе одного из них можно нажать кнопку Insert before или Insert after и добавить новые div до или после выбранного  элемента используя метод insertAdjacentElement().

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
+ +

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

+ +

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

+ +
+ +

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

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