files/zh-cn/web/api/element/insertadjacentelement/index.html


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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

---
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>