1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
title: Node.insertBefore()
slug: Web/API/Node/insertBefore
tags:
- API
- DOM
- DOM Element Methods
- Method
- WebAPI
translation_of: Web/API/Node/insertBefore
---
<div>
<div>{{APIRef("DOM")}}</div>
</div>
<p>Метод <code><strong>Node.insertBefore()</strong></code> добавляет элемент в список дочерних элементов родителя перед указанным элементом.</p>
<h2 id="Syntax">Синтаксис</h2>
<pre class="syntaxbox">var <em>insertedElement</em> = <em>parentElement</em>.insertBefore(<em>newElement</em>, <em>referenceElement</em>);
</pre>
<p>В Mozilla Firefox, если <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">referenceElement</span> не задан или равен <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">null</span>, <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">newElement</span> вставляется в конец списка дочерних элементов. В IE, <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">referenceElement</span> равный <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">undefined</span>, сгенерируется исключение <span style="line-height: 1.5;">"</span>Invalid argument", в то время как Chrome сгенерирует исключение "Uncaught TypeError", ожидая 2 аргумента.</p>
<ul>
<li><code>insertedElement</code> Вставленный элемент.</li>
<li><code>parentElement</code> Родитель для нового элемента.</li>
<li><code>newElement</code> Элемент для вставки.</li>
<li><code>referenceElement</code> Элемент, перед которым будет вставлен <code>newElement</code>.</li>
</ul>
<h2 id="Example">Пример</h2>
<pre class="brush:html"><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>
</pre>
<p>Однако нет метода <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">insertAfter</span>. Он может быть заменён использованием метода <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">insertBefore</span> в связке с <code style="font-style: normal;"><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p>
<p>В предыдущем примере <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp1</span> может быть вставлен после <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span> следующим образом:</p>
<pre><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre>
<p>Если <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span> не имеет следующего элемента, то он будет последним дочерним элементом, <code style="font-style: normal;">sp2.nextSibling вернёт </code><span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">null</span>, а <code style="font-style: normal;">sp1</code> вставится в конец дочернего узла (сразу после <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span>).</p>
<h2 id="Example2">Пример 2</h2>
<p>Вставка элемента перед первым дочерним элементом с помощью <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p>
<pre class="brush:js">// Получаем ссылку на элемент в который мы хотим добавить новый элемент
var parentElement = document.getElementById('parentElement');
// Получаем ссылку на первый дочерний элемент
var theFirstChild = parentElement.firstChild;
// Создаём новый элемент, который будем добавлять
var newElement = document.createElement("div");
// Вставляем новый элемент перед первым дочерним элементом
parentElement.insertBefore(newElement, theFirstChild);
</pre>
<p>Когда у родителя нет первого дочернего элемента, <code>firstChild</code> вернёт <code>null</code>. Новый элемент всё равно будет выставляться после последнего дочернего элемента. Но так как родитель не имеет первого дочернего элемента, то он не будет иметь и последнего. Следовательно, после добавления в него элемента, этот элемент будет единственным дочерним элементом.</p>
<h2 id="Browser_Compatibility">Совместимость с браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Specification">Спецификация</h2>
<ul>
<li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></li>
</ul>
|
