From 5fbfeee5908241590dacb0f0aac3859f61360947 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 27 Feb 2022 13:04:02 +0900 Subject: Node インターフェイスのメソッドの記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/insertbefore/index.html | 186 -------------------------- files/ja/web/api/node/insertbefore/index.md | 186 ++++++++++++++++++++++++++ 2 files changed, 186 insertions(+), 186 deletions(-) delete mode 100644 files/ja/web/api/node/insertbefore/index.html create mode 100644 files/ja/web/api/node/insertbefore/index.md (limited to 'files/ja/web/api/node/insertbefore') diff --git a/files/ja/web/api/node/insertbefore/index.html b/files/ja/web/api/node/insertbefore/index.html deleted file mode 100644 index 2bfea72cdf..0000000000 --- a/files/ja/web/api/node/insertbefore/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Node.insertBefore() -slug: Web/API/Node/insertBefore -tags: - - API - - DOM - - Element - - Method - - Node - - Reference - - メソッド -translation_of: Web/API/Node/insertBefore ---- -
{{APIRef("DOM")}}
- -

Node.insertBefore() メソッドは、ノードを参照ノードの前に、指定された親ノードの子として挿入します。

- -

指定されたノードが既に文書中に存在した場合、 insertBefore() はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)

- -

これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。

- -
-

メモ: {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 cloneNode() で作成された複製は自動的には同期されません。

-
- -

指定された子が {{domxref("DocumentFragment")}} である場合、 DocumentFragment の内容全体が指定された親ノードの子リストに移動されます。

- -

構文

- -
let insertedNode = parentNode.insertBefore(newNode, referenceNode)
-
- -
-
insertedNode
-
挿入されたノード (newNode と同じ) です。
-
parentNode
-
新しく挿入されるノードの親です。
-
newNode
-
挿入されるノードです。
-
referenceNode
-
newNode がこのノードの直前に挿入されます。このノードが null である場合は、 newNode は parentNode の子ノードの末尾に挿入されます。
-
- -
-

メモ: referenceNode は省略可能な引数ではありません。明示的に {{domxref("Node")}} または null を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって異なる動作をすることがあります。

-
- -

返値

- -

追加された子ノードを返します (ただし newNode が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。

- -

例

- -

例 1

- -
<div id="parentElement">
-   <span id="childElement">foo bar</span>
-</div>
-
-<script>
-// 挿入する新しいノードを作成する
-let newNode = document.createElement("span")
-
-// 親ノードの参照を取得する
-let parentDiv = document.getElementById("childElement").parentNode
-
-// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作)
-let sp2 = document.getElementById("childElement")
-parentDiv.insertBefore(newNode, sp2)
-// テストケース [ 1 ] 終了
-
-// テストケース [ 2 ] 開始: childElement が undefined 型の場合
-let sp2 = undefined // "childElement" の ID を持つノードが存在しない
-parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換
-// テストケース [ 2 ] 終了
-
-// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合
-let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない
-parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument"
-// テストケース [ 3 ] 終了
-</script>
-
- -

例 2

- -
<div id="parentElement">
-  <span id="childElement">foo bar</span>
-</div>
-
-<script>
-// 新しい只の <span> 要素を作成
-let sp1 = document.createElement("span")
-
-// 参照要素を取得
-let sp2 = document.getElementById("childElement")
-// 親要素を取得
-let parentDiv = sp2.parentNode
-
-// 新しい要素を sp2 の手前に挿入
-parentDiv.insertBefore(sp1, sp2)
-</script>
-
- -
-

メモ: insertAfter() メソッドはありません。これは insertBefore メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。

-
- -

前の例では、 sp1 は以下のようにして sp2 の後に挿入することができます。

- -
parentDiv.insertBefore(sp1, sp2.nextSibling)
- -

sp2 に次の兄弟がない場合、これは最後の子ノードです。 — sp2.nextSibling は null を返し、 sp1 は子ノードリストの末尾 (sp2 の直後) に挿入されます。

- -

例 3

- -

要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。

- -
// 親ノードを取得
-let parentElement = document.getElementById('parentElement')
-// 親の最初の子を取得
-let theFirstChild = parentElement.firstChild
-
-// 新しい要素を取得
-let newElement = document.createElement("div")
-
-// 最初の子の前に新しい要素を挿入
-parentElement.insertBefore(newElement, theFirstChild)
-
- -

要素に最初の子がない場合、 firstChild は null になります。その場合も、要素は親の最後の子の後に追加されます。

- -

親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は唯一の要素になります。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}挿入アルゴリズムのエラーを修正
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}より詳細にアルゴリズムを記述
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}目立った変更はなし
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}目立った変更はなし
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}導入
- -

ブラウザーの互換性

- -

{{Compat("api.Node.insertBefore")}}

- -

関連情報

- - diff --git a/files/ja/web/api/node/insertbefore/index.md b/files/ja/web/api/node/insertbefore/index.md new file mode 100644 index 0000000000..2bfea72cdf --- /dev/null +++ b/files/ja/web/api/node/insertbefore/index.md @@ -0,0 +1,186 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +tags: + - API + - DOM + - Element + - Method + - Node + - Reference + - メソッド +translation_of: Web/API/Node/insertBefore +--- +
{{APIRef("DOM")}}
+ +

Node.insertBefore() メソッドは、ノードを参照ノードの前に、指定された親ノードの子として挿入します。

+ +

指定されたノードが既に文書中に存在した場合、 insertBefore() はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)

+ +

これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。

+ +
+

メモ: {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 cloneNode() で作成された複製は自動的には同期されません。

+
+ +

指定された子が {{domxref("DocumentFragment")}} である場合、 DocumentFragment の内容全体が指定された親ノードの子リストに移動されます。

+ +

構文

+ +
let insertedNode = parentNode.insertBefore(newNode, referenceNode)
+
+ +
+
insertedNode
+
挿入されたノード (newNode と同じ) です。
+
parentNode
+
新しく挿入されるノードの親です。
+
newNode
+
挿入されるノードです。
+
referenceNode
+
newNode がこのノードの直前に挿入されます。このノードが null である場合は、 newNode は parentNode の子ノードの末尾に挿入されます。
+
+ +
+

メモ: referenceNode は省略可能な引数ではありません。明示的に {{domxref("Node")}} または null を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって異なる動作をすることがあります。

+
+ +

返値

+ +

追加された子ノードを返します (ただし newNode が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。

+ +

例

+ +

例 1

+ +
<div id="parentElement">
+   <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// 挿入する新しいノードを作成する
+let newNode = document.createElement("span")
+
+// 親ノードの参照を取得する
+let parentDiv = document.getElementById("childElement").parentNode
+
+// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作)
+let sp2 = document.getElementById("childElement")
+parentDiv.insertBefore(newNode, sp2)
+// テストケース [ 1 ] 終了
+
+// テストケース [ 2 ] 開始: childElement が undefined 型の場合
+let sp2 = undefined // "childElement" の ID を持つノードが存在しない
+parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換
+// テストケース [ 2 ] 終了
+
+// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合
+let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない
+parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument"
+// テストケース [ 3 ] 終了
+</script>
+
+ +

例 2

+ +
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// 新しい只の <span> 要素を作成
+let sp1 = document.createElement("span")
+
+// 参照要素を取得
+let sp2 = document.getElementById("childElement")
+// 親要素を取得
+let parentDiv = sp2.parentNode
+
+// 新しい要素を sp2 の手前に挿入
+parentDiv.insertBefore(sp1, sp2)
+</script>
+
+ +
+

メモ: insertAfter() メソッドはありません。これは insertBefore メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。

+
+ +

前の例では、 sp1 は以下のようにして sp2 の後に挿入することができます。

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling)
+ +

sp2 に次の兄弟がない場合、これは最後の子ノードです。 — sp2.nextSibling は null を返し、 sp1 は子ノードリストの末尾 (sp2 の直後) に挿入されます。

+ +

例 3

+ +

要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。

+ +
// 親ノードを取得
+let parentElement = document.getElementById('parentElement')
+// 親の最初の子を取得
+let theFirstChild = parentElement.firstChild
+
+// 新しい要素を取得
+let newElement = document.createElement("div")
+
+// 最初の子の前に新しい要素を挿入
+parentElement.insertBefore(newElement, theFirstChild)
+
+ +

要素に最初の子がない場合、 firstChild は null になります。その場合も、要素は親の最後の子の後に追加されます。

+ +

親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は唯一の要素になります。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}挿入アルゴリズムのエラーを修正
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}より詳細にアルゴリズムを記述
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}目立った変更はなし
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}目立った変更はなし
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}導入
+ +

ブラウザーの互換性

+ +

{{Compat("api.Node.insertBefore")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf