---
title: Element.insertAdjacentElement()
slug: Web/API/Element/insertAdjacentElement
tags:
  - Element.insertAdjacentElement()
  - insertAdjacentElement()
translation_of: Web/API/Element/insertAdjacentElement
---
<p>{{APIRef("DOM")}}</p>

<p><strong><code>insertAdjacentElement()</code> </strong>方法将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。</p>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre><em>element</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre>

<h3 id="参数">参数</h3>

<dl>
 <dt>position</dt>
 <dd>A {{domxref("DOMString")}} 表示相对于该元素的位置；必须是以下字符串之一：
 <ul>
  <li><code style="color: red;">'beforebegin'</code>: 在该元素本身的前面.</li>
  <li><code style="color: green;">'afterbegin'</code>:只在该元素当中, 在该元素第一个子孩子前面.</li>
  <li><code style="color: blue;">'beforeend'</code>:只在该元素当中, 在该元素最后一个子孩子后面.</li>
  <li><code style="color: magenta;">'afterend'</code>: 在该元素本身的后面.</li>
 </ul>
 </dd>
 <dt>element</dt>
 <dd>要插入到树中的元素.</dd>
</dl>

<h3 id="返回值">返回值</h3>

<p>插入的元素，插入失败则返回null.</p>

<h3 id="异常">异常</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">异常</th>
   <th scope="col">说明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>SyntaxError</code></td>
   <td>插入的位置是一个无法识别的值。</td>
  </tr>
  <tr>
   <td><code>TypeError</code></td>
   <td>插入的元素不是一个有效元素。</td>
  </tr>
 </tbody>
</table>

<h3 id="位置命名的可视化展示">位置命名的可视化展示</h3>

<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
<code style="font-weight: bold;">&lt;p&gt;</code>
&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
foo
&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
<code style="font-weight: bold;">&lt;/p&gt;</code>
&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>

<div class="note"><strong>注:</strong> 当节点处于DOM树中而且有一个父元素的时候 <code>beforebegin</code> 和 <code>afterend操作才能起作用。</code></div>

<h2 id="Example" name="Example">例子</h2>

<pre class="brush: js">beforeBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  activeElem.insertAdjacentElement('beforebegin',tempDiv);
  setListener(tempDiv);
});

afterBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  activeElem.insertAdjacentElement('afterend',tempDiv);
  setListener(tempDiv);
});</pre>

<p>看看我们在 Github （也可以参考 <a href="https://github.com/mdn/insert-adjacent/blob/master/insertAdjacentElement.html">源码</a>）上的 <a href="http://mdn.github.io/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> 演示。在一个容器当中我们有一组{{htmlelement("div")}} 元素。 点击其中一个div时，这个容器会处于选中状态，然后你就可以按下<em>Insert before</em> 或<em>Insert after</em> 按钮通过 <code>insertAdjacentElement()方法</code>来把一个新的divs 插入到选中的元素前面或者后面。</p>

<h2 id="Specification" name="Specification">规范</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 WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td>
   <td>{{ Spec2('DOM WHATWG') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("48.0") }}</td>
   <td>8</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("48.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="参见">参见</h2>

<ul>
 <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
 <li>{{domxref("Element.insertAdjacentText()")}}</li>
 <li>{{domxref("Node.insertBefore()")}}</li>
 <li>{{domxref("Node.appendChild()")}} (same effect as <code>beforeend</code>)</li>
</ul>