ChildNode.after を各インターフェイスへ分割 (#1582)

* ChildNode.after を各インターフェイスへ分割

* orphaned/Web/API/ChildNode/after を廃止

6 files changed, 237 insertions, 194 deletions

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 9331206b20..d9b67a9d1b 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3482,7 +3482,6 @@
 /ja/docs/Web/API/CanvasRenderingContext2D.removeHitRegion	/ja/docs/Web/API/CanvasRenderingContext2D/removeHitRegion
 /ja/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas	/ja/docs/Web/API/Canvas_API/Tutorial
 /ja/docs/Web/API/ChildNode	/ja/docs/orphaned/Web/API/ChildNode
-/ja/docs/Web/API/ChildNode/after	/ja/docs/orphaned/Web/API/ChildNode/after
 /ja/docs/Web/API/ChildNode/before	/ja/docs/orphaned/Web/API/ChildNode/before
 /ja/docs/Web/API/ChildNode/replaceWith	/ja/docs/orphaned/Web/API/ChildNode/replaceWith
 /ja/docs/Web/API/Console.error	/ja/docs/Web/API/Console/error
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index baa0d4f3bd..8582891cbd 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -50975,14 +50975,6 @@
       "momoi"
     ]
   },
-  "orphaned/Web/API/ChildNode/after": {
-    "modified": "2020-10-17T21:33:51.563Z",
-    "contributors": [
-      "dskmori",
-      "Potappo",
-      "Shirasu"
-    ]
-  },
   "orphaned/Web/API/ChildNode/before": {
     "modified": "2020-10-17T03:58:22.731Z",
     "contributors": [
diff --git a/files/ja/orphaned/web/api/childnode/after/index.html b/files/ja/orphaned/web/api/childnode/after/index.html
deleted file mode 100644
index 837ab99d5e..0000000000
--- a/files/ja/orphaned/web/api/childnode/after/index.html
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: ChildNode.after()
-slug: orphaned/Web/API/ChildNode/after
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
-translation_of: Web/API/ChildNode/after
-original_slug: Web/API/ChildNode/after
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>ChildNode.after()</strong></code> は、<code>ChildNode</code> の親の子リストの、<code>ChildNode</code> の直後に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">[Throws, Unscopable]
-void ChildNode.after((Node or DOMString)... nodes);
-</pre>
-
-<h3 id="Parameters" name="Parameters">パラメーター</h3>
-
-<dl>
- <dt><code>nodes</code></dt>
- <dd>{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。</dd>
-</dl>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<ul>
- <li>{{domxref("HierarchyRequestError")}}: ノードは階層の指定の位置には挿入できません。</li>
-</ul>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Inserting_an_element" name="Inserting_an_element">要素の挿入</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);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
-</pre>
-
-<h3 id="Inserting_text" name="Inserting_text">テキストの挿入</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);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;Text&lt;/div&gt;"</pre>
-
-<h3 id="Inserting_an_element_and_text" name="Inserting_an_element_and_text">要素とテキストの挿入</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);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;Text&lt;/div&gt;"</pre>
-
-<h3 id="ChildNode.after_is_unscopable" name="ChildNode.after_is_unscopable"><code>ChildNode.after()</code> はスコーピングに非対応</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" name="Polyfill">ポリフィル</h2>
-
-<p>以下のポリフィルで、Internet Explorer 9 以降でも <code>after()</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" name="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&lt;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&lt;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="Specification" name="Specification">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-
-
-<p>{{Compat("api.ChildNode.after")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</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>
diff --git a/files/ja/web/api/characterdata/after/index.html b/files/ja/web/api/characterdata/after/index.html
new file mode 100644
index 0000000000..ea6dedc1ed
--- /dev/null
+++ b/files/ja/web/api/characterdata/after/index.html
@@ -0,0 +1,85 @@
+---
+title: CharacterData.after()
+slug: Web/API/CharacterData/after
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Reference
+browser-compat: api.CharacterData.after
+translation_of: Web/API/CharacterData/after
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>CharacterData.after()</strong></code> は、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの <code>CharacterData</code> の親ノードの子リストの、この <code>CharacterData</code> の直後に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">
+after(... nodes)
+</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+  <dt><code>nodes</code></dt>
+  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
+</dl>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: ノードを階層内の指定の位置に挿入できません。</li>
+</ul>
+
+<h2 id="Examples">例</h2>
+
+<h3>新しいノードでテキストを挿入</h3>
+
+<p><code>after()</code> メソッドで、 <code>CharacterData</code> ノードの後に新しいノードを挿入することができます。</p>
+
+<pre class="brush: js">
+const h1TextNode = document.getElementsByTagName('h1')[0].firstChild;
+h1TextNode.after(" #h1");
+
+h1TextNode.parentElement.childNodes
+// NodeList [#text "CharacterData.after()", #text " #h1"]
+
+h1TextNode.data;
+// "CharacterData.after()"
+</pre>
+
+<h3>現在のノードにテキストを追加</h3>
+
+<p>現在のノードにテキストを追加したいのであれば、 <a href="/ja/docs/Web/API/CharacterData/appendData"><code>appendData()</code></a> メソッドで現在のノードのデータに追加することができます。</p>
+
+<pre class="brush: js">
+const h1TextNode = document.getElementsByTagName('h1')[0].firstChild;
+h1TextNode.appendData(" #h1");
+
+h1TextNode.parentElement.childNodes;
+// NodeList [#text "CharacterData.after() #h1"]
+
+h1TextNode.data;
+// "CharacterData.after() #h1"
+</pre>
+
+<h2 id="Specification">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("CharacterData.appendData()")}}</li>
+  <li>{{domxref("CharacterData.before()")}}</li>
+  <li>{{domxref("Element.append()")}}</li>
+  <li>{{domxref("Node.appendChild()")}}</li>
+  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+  <li>{{domxref("NodeList")}}</li>
+ </ul>
diff --git a/files/ja/web/api/documenttype/after/index.html b/files/ja/web/api/documenttype/after/index.html
new file mode 100644
index 0000000000..ccf4b5e008
--- /dev/null
+++ b/files/ja/web/api/documenttype/after/index.html
@@ -0,0 +1,62 @@
+---
+title: DocumentType.after()
+slug: Web/API/DocumentType/after
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Reference
+browser-compat: api.DocumentType.after
+translation_of: Web/API/DocumentType/after
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>DocumentType.after()</strong></code> は、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの <code>DocumentType</code> の親ノードの子リストの、この<code>DocumentType</code> の直後に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">
+after(... nodes)
+</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+  <dt><code>nodes</code></dt>
+  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
+</dl>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+  <li>{{domxref("HierarchyRequestError")}}: ノードを階層内の指定の位置に挿入できません。</li>
+</ul>
+
+<h2 id="Examples">例</h2>
+
+<h3></h3>
+
+<pre class="brush: js">
+let docType = document.implementation.createDocumentType("html", "", "");
+let myDoc = document.implementation.createDocument("", "", docType);
+
+docType.after(document.createElement('html'));
+
+myDoc.childNodes;
+// NodeList [&lt;!DOCTYPE html&gt;, &lt;html&gt;]
+</pre>
+
+<h2 id="Specification">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("DocumentType.before()")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/after/index.html b/files/ja/web/api/element/after/index.html
new file mode 100644
index 0000000000..52186ca2fb
--- /dev/null
+++ b/files/ja/web/api/element/after/index.html
@@ -0,0 +1,90 @@
+---
+title: Element.after()
+slug: Web/API/Element/after
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Reference
+browser-compat: api.Element.after
+translation_of: Web/API/Element/after
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.after()</strong></code> は、<code>Element</code> の親の子リストの、<code>Element</code> の直後に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">
+after(... nodes)
+</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+  <dt><code>nodes</code></dt>
+  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
+</dl>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+  <li>{{domxref("HierarchyRequestError")}}: ノードを階層内の指定の位置に挿入できません。</li>
+</ul>
+
+<h2 id="Examples">例</h2>
+
+<h3 id="Inserting_an_element">要素の挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.after(span);
+
+console.log(container.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Inserting_text">テキストの挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+
+p.after("Text");
+
+console.log(container.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;Text&lt;/div&gt;"</pre>
+
+<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.after(span, "Text");
+
+console.log(container.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;Text&lt;/div&gt;"</pre>
+
+<h2 id="Specification">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.before()")}}</li>
+  <li>{{domxref("Element.append()")}}</li>
+  <li>{{domxref("Node.appendChild()")}}</li>
+  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+  <li>{{domxref("NodeList")}}</li>
+</ul>