initial commit

1 files changed, 132 insertions, 0 deletions

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
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Метод <code><strong>Node.insertBefore()</strong></code> добавляет элемент в  список дочерних элементов родителя перед указанным элементом.</p>
+
+<h2 id="Syntax" name="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> вcтавляется в конец списка дочерних элеметнов. В 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" name="Example">Пример</h2>
+
+<pre class="brush:html">&lt;div id="parentElement"&gt;
+  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Создаем новый &lt;span&gt;
+var sp1 = document.createElement("span");
+
+// Получаем ссылку на элемент, перед которым мы хотим вставить sp1
+var sp2 = document.getElementById("childElement");
+//Получаем ссылку на родителя sp2
+var parentDiv = sp2.parentNode;
+
+// Вставляем sp1 перед sp2
+parentDiv.insertBefore(sp1, sp2);
+&lt;/script&gt;
+</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" name="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" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="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>