JavaScriptで兄弟ノードを作成する方法

JavaScript はフロントエンド開発によく使用されるプログラミング言語で、HTML 要素やその他の DOM 操作を作成、変更、削除できます。 HTML ドキュメントでは、兄弟ノードは、同じ親ノードの下にあるすべての子ノードを指します。 Web ページ上で動的な効果やインタラクティブな機能を実現するために、JavaScript を使用して新しい兄弟ノードを作成する必要がある場合があります。

兄弟ノードを作成するには、JavaScript を介して HTML ドキュメント内の DOM 要素を操作する必要があります。 DOM (Document Object Model) は HTML ドキュメントの表現です。HTML ドキュメントをツリー構造に変換します。JavaScript を使用して DOM 要素にアクセスし、操作できます。

以下では、JavaScript を使用して兄弟ノードを作成する方法をいくつかのケースを通して説明します。

1. 兄弟要素の前に新しい要素を挿入する

insertBefore() メソッドを使用して、兄弟要素の前に新しい要素を追加できます。サンプル コードは次のとおりです。

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, refNode);

この例では、まず getElementById() メソッドを使用して参照ノード (つまり、兄弟ノードを作成する要素) を取得し、次に createElement() メソッドを使用します。 div 要素ノードを作成し、その innerHTML 属性を「新しいノード」に設定するメソッド。最後に、insertBefore() メソッドを使用して、新しいノードを参照ノードの親ノードに挿入し、参照ノードの先行する兄弟ノードになります。

2. 兄弟要素の後に新しい要素を挿入

兄弟要素の後に新しいノードを追加する必要がある場合は、まず兄弟要素の次の要素を取得します。兄弟ノードを作成し、その前に新しいノードを挿入します。サンプル コードは次のとおりです。

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 获取参考节点的下一个兄弟节点
var nextNode = refNode.nextSibling;

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, nextNode);

この例では、まず getElementById() メソッドを使用して参照ノードを取得し、次に div 要素ノードを作成し、その innerHTML 属性を「新しいノード」に設定します。次に、nextSibling プロパティを使用して、参照ノードの次の兄弟ノードを取得します。最後に、参照ノードの親ノードで insertBefore() メソッドを使用して、参照ノードの後続の兄弟ノードの前に新しいノードを挿入します。

3. タグ内に新しい要素を挿入する

既存のタグ内にノードを追加したい場合は、appendChild() メソッドを使用できます。サンプル コードは次のとおりです。

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("span");
newNode.innerHTML = "新节点";

// 将新节点添加到参考节点的内部
refNode.appendChild(newNode);

この例では、まず getElementById() メソッドを使用して参照ノードを取得し、次に、span 要素ノードを作成し、その innerHTML 属性を「新しいノード」に設定します。最後に、参照ノード内で appendChild() メソッドを使用して、新しいノードをラベルに追加します。

概要

JavaScript では、DOM 要素を操作することで、HTML 要素の作成、変更、削除やその他の DOM 操作を行うことができます。最も一般的な操作の 1 つは、新しい兄弟ノードの作成です。この記事では、JavaScript を使用して兄弟ノードを作成する 3 つの方法 (兄弟要素の前に新しい要素を挿入する、兄弟要素の後に新しい要素を挿入する、タグ内に新しい要素を挿入する) を紹介します。実際の状況に応じて、Web ページの動的な効果やインタラクティブな機能を実現するためにさまざまな方法を選択できます。

以上がJavaScriptで兄弟ノードを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。