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
165
166
167
168
169
170
171
172
173
174
175
|
---
title: ChildNode.after()
slug: Web/API/ChildNode/after
translation_of: Web/API/ChildNode/after
---
<div>{{APIRef("DOM")}}</div>
<p><strong><code>ChildNode.after()</code> </strong>方法会在其父节点的子节点列表中插入一些<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Node")}} 或<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("DOMString")}} 对象。插入位置为该节点之后。{{domxref("DOMString")}} 对象会被以<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Text")}} 的形式插入。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">[Throws, Unscopable]
void ChildNode.after((Node or DOMString)... nodes);
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>nodes</code></dt>
<dd>一组准备插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 。</dd>
</dl>
<h3 id="错误">错误</h3>
<ul>
<li>{{domxref("HierarchyRequestError")}}: 在某些不正确的层级结构进行了插入操作。</li>
</ul>
<h2 id="示例">示例</h2>
<h3 id="插入元素">插入元素</h3>
<pre class="brush: js notranslate">var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.after(span);
console.log(parent.outerHTML);
// "<div><p></p><span></span></div>"
</pre>
<h3 id="插入文本">插入文本</h3>
<pre class="brush: js notranslate">var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
child.after("Text");
console.log(parent.outerHTML);
// "<div><p></p>Text</div>"</pre>
<h3 id="同时插入元素和文本">同时插入元素和文本</h3>
<pre class="brush: js notranslate">var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.after(span, "Text");
console.log(parent.outerHTML);
// "<div><p></p><span></span>Text</div>"</pre>
<h3 id="ChildNode.after_会被_with_环境排除"><code>ChildNode.after()</code> 会被 with 环境排除</h3>
<p><code>after()</code> 方法不在 <code>with 环境的范围内，可以查看</code> {{jsxref("Symbol.unscopables")}} 来了解更多信息。</p>
<pre class="brush: js notranslate">with(node) {
after("foo");
}
// ReferenceError: after is not defined </pre>
<h2 id="Polyfill">Polyfill</h2>
<p>You can polyfill the <code>after()</code> method in Internet Explorer 9 and higher with the following code:</p>
<pre class="brush: js notranslate">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('after')) {
return;
}
Object.defineProperty(item, 'after', {
configurable: true,
enumerable: true,
writable: true,
value: function after() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment();
argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});
this.parentNode.insertBefore(docFrag, this.nextSibling);
}
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
<h3 id="Another_polyfill">Another polyfill</h3>
<pre class="brush: js notranslate">// from: https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js
(function(x){
var o=x.prototype,p='after';
if(!o[p]){
o[p]=function(){
var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document;
if(p!==null){
while(i<l){
e=m[i];
if(e instanceof n){
t=t.nextSibling;
if(t!==null){
p.insertBefore(e,t);
}else{
p.appendChild(e);
};
}else{
p.appendChild(d.createTextNode(s(e)));
};
++i;
};
};
};
};
})(Element);
/*
minified:
(function(x){
var o=x.prototype;
o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}});
}(Element));
*/</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.ChildNode.after")}}</p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>{{domxref("ChildNode")}} 和 {{domxref("ParentNode")}}</li>
<li>{{domxref("ChildNode.before()")}}</li>
<li>{{domxref("ParentNode.append()")}}</li>
<li>{{domxref("Node.appendChild()")}}</li>
<li>{{domxref("Element.insertAdjacentElement()")}}</li>
<li>{{domxref("NodeList")}}</li>
</ul>
|
