files/zh-cn/web/api/element/insertadjacenttext/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

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

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

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

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

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

<dl>
 <dt>position</dt>
 <dd>A {{domxref("DOMString")}} representing the position relative to the <code>element</code>; must be one of the following strings:
 <ul>
  <li><code style="color: red;">'beforebegin'</code>: Before the <code>element</code> itself.</li>
  <li><code style="color: green;">'afterbegin'</code>: Just inside the <code>element</code>, before its first child.</li>
  <li><code style="color: blue;">'beforeend'</code>: Just inside the <code>element</code>, after its last child.</li>
  <li><code style="color: magenta;">'afterend'</code>: After the <code>element</code> itself.</li>
 </ul>
 </dd>
 <dt>element</dt>
 <dd>A {{domxref("DOMString")}} representing the text to be inserted into the tree.</dd>
</dl>

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

<p>Void.</p>

<h3 id="例外">例外</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Exception</th>
   <th scope="col">Explanation</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>SyntaxError</code></td>
   <td>The <code>position</code> specified is not a recognised value.</td>
  </tr>
 </tbody>
</table>

<h3 id="Visualization_of_position_names">Visualization of position names</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">注意：只有当节点位于树中并具有元素父元素时，beforebegin和afterend位置才能工作。</div>

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

<pre class="brush: js">beforeBtn.addEventListener('click', function() {
  para.insertAdjacentText('afterbegin',textInput.value);
});

afterBtn.addEventListener('click', function() {
  para.insertAdjacentText('beforeend',textInput.value);
});</pre>

<p>Have a look at our <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> demo on GitHub (see the <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">source code</a> too.) Here we have a simple paragraph. You can enter some text into the form element, then press the <em>Insert before</em> and <em>Insert after</em> buttons to insert it before or after the existing paragraph text using <code>insertAdjacentText()</code>. Note that the existing text node is not added to — further text nodes are created containing the new additions.</p>

<h2 id="Specification" name="Specification">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</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>{{ CompatUnknown() }}</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.insertAdjacentElement()")}}</li>
 <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
</ul>