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/node/insertbefore/index.html | 132 ++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/ru/web/api/node/insertbefore/index.html (limited to 'files/ru/web/api/node/insertbefore/index.html') diff --git a/files/ru/web/api/node/insertbefore/index.html b/files/ru/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..f28d388147 --- /dev/null +++ b/files/ru/web/api/node/insertbefore/index.html @@ -0,0 +1,132 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +tags: + - API + - DOM + - DOM Element Methods + - Method + - WebAPI +translation_of: Web/API/Node/insertBefore +--- +
+
{{APIRef("DOM")}}
+
+ +

Метод Node.insertBefore() добавляет элемент в  список дочерних элементов родителя перед указанным элементом.

+ +

Синтаксис

+ +
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
+
+ +

В Mozilla Firefox, если referenceElement не задан или равен null, newElement вcтавляется в конец списка дочерних элеметнов. В IE, referenceElement равный undefined, сгенерируется исключение "Invalid argument", в то время как Chrome сгенерирует исключение  "Uncaught TypeError", ожидая 2 аргумента.

+ + + +

Пример

+ +
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Создаем новый <span>
+var sp1 = document.createElement("span");
+
+// Получаем ссылку на элемент, перед которым мы хотим вставить sp1
+var sp2 = document.getElementById("childElement");
+//Получаем ссылку на родителя sp2
+var parentDiv = sp2.parentNode;
+
+// Вставляем sp1 перед sp2
+parentDiv.insertBefore(sp1, sp2);
+</script>
+
+ +

Однако нет метода insertAfter. Он может быть заменен использованием метода insertBefore в связке с nextSibling.

+ +

В предыдущем примере sp1 может быть вставлен после sp2 следующим образом:

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+ +

Если sp2 не имеет следующего элемента, то он будет последним дочерним элементом,  sp2.nextSibling вернет null, а sp1 вставится в конец дочернего узла (сразу после sp2).

+ +

Пример 2

+ +

Вставка элемента перед первым дочерним элементом с помощью firstChild.

+ +
// Получаем ссылку на элемент в который мы хотим добавить новый элемент
+var parentElement = document.getElementById('parentElement');
+// Получаем ссылку на первый дочерний элемент
+var theFirstChild = parentElement.firstChild;
+
+// Создаем новый элемент, который будем добавлять
+var newElement = document.createElement("div");
+
+// Вставляем новый элемент перед первым дочерним элементом
+parentElement.insertBefore(newElement, theFirstChild);
+
+ +

Когда у родителя нет первого дочернего элемента, firstChild вернет null. Новый элемент все равно будет втавляться после последнего дочернего элемента. Но так как родитель не имеет первого дочернего элемета, то он не будет иметь и последнего. Следовательно, после добавления в него элемента, этот элемент будет единственным дочерним элементом.

+ +

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

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

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

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