initial commit

1 files changed, 88 insertions, 0 deletions

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
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><strong><code>insertAdjacentHTML()</code></strong> разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы, что предотвращает дополнительную сериализацию и поэтому работает быстрее, чем манипуляции с {{domxref("Element.innerHTML", "innerHTML")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>targetElement</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>position</code></dt>
+ <dd>{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: до самого <code>element</code> (до открывающего тега).</li>
+  <li><code style="color: green;">'afterbegin'</code>: сразу после открывающего тега  <code>element </code>(перед первым потомком).</li>
+  <li><code style="color: blue;">'beforeend'</code>: сразу перед закрывающим тегом <code>element</code> (после последнего потомка).</li>
+  <li><code style="color: magenta;">'afterend'</code>: после <code>element</code> (после закрывающего тега).</li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>Строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.</dd>
+</dl>
+
+<h3 id="Наглядное_отображение_параметра_position">Наглядное отображение параметра position</h3>
+
+<div class="wp_syntax">
+<div class="code">
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<strong><code>&lt;p&gt;</code></strong>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<strong><code>&lt;/p&gt;</code></strong>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+</div>
+</div>
+
+<div class="note"><strong>Примечание:</strong>  позиции <code>beforebegin</code> и <code>afterend</code> работают только если узел имеет родительский элемент.</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// At this point, the new structure is:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<h3 id="Соображения_безопасности">Соображения безопасности</h3>
+
+<p>Будьте осторожны при использовании вставки HTML на страницу с помощью <code>insertAdjacentHTML()</code>, не используете пользовательский ввод, который не был экранирован.</p>
+
+<p>Не рекомендуется использовать <code>insertAdjacentHTML()</code>, когда требуется ввести простой текст. Используйте для этого свойство {{domxref("Node.textContent")}} или метод {{domxref("Element.insertAdjacentText()")}}. Они не будут интерпретировать текст как HTML, а вставят необработанный текст.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="Specification" name="Specification"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Смотрите также</span></h2>
+
+<p><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</a></p>