DOM 追加ノード
XML DOM ノードの追加
試してみる - 例 以下の例では、XML ファイルbooks.xml を使用します。
外部 JavaScript にある関数loadXMLDoc()は、XML ファイルをロードするために使用されます。
最後の子ノードの後にノードを追加します
この例では、appendChild() メソッドを使用して、子ノードを既存のノードに追加します。
指定された子ノードの前にノードを追加します
この例では、insertBefore() メソッドを使用して、指定された子ノードの前にノードを挿入します。
新しい属性を追加する
この例では、setAttribute() メソッドを使用して新しい属性を追加します。
テキスト ノードにデータを追加する
この例では、insertData() を使用して、既存のテキスト ノードにデータを挿入します。
ノードの追加 - appendChild()
appendChild() メソッドは、子ノードを既存のノードに追加します。
新しいノードは、既存の子ノードの後に追加 (追加) されます。
注: ノードの位置が重要な場合は、insertBefore() メソッドを使用してください。
次のコード スニペットは要素 (<edition>) を作成し、最初の <book> 要素の最後の子ノードの後に追加します。 「例を実行」ボタンをクリックしてオンライン例を表示します
例の説明:
loadXMLDoc() を使用して「books」をロードします。このノードを最初の <book> 要素に追加します
トラバースして要素を追加しますすべての <book> 要素: 試してみてください
ノードの挿入 - insertBefore()
- insertBefore() メソッドは、指定された子ノードの前にノードを挿入します。
このメソッドは、追加されるノードの位置が重要な場合に便利です:
- インスタンス
<!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); newel=xmlDoc.createElement("edition"); x=xmlDoc.getElementsByTagName("book")[0]; x.appendChild(newel); document.write(x.getElementsByTagName("edition")[0].nodeName); </script> </body> </html> インスタンスの実行 »
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
例の説明:
loadXMLDoc()を使用して「books.xml」をxmlDocにロードします
新しい要素ノード<book>を作成します
この新しいノードを最後の<book>に挿入します要素ノード
insertBefore() の 2 番目のパラメーターが null の場合、新しいノードは既存の最後の子ノードの後に追加されます。
x.insertBefore(newNode,null) と x.appendChild(newNode) は両方とも、新しい子ノードを x に追加できます。
新しい属性を追加する
addAtribute() このメソッドは存在しません。
属性が存在しない場合は、setAttribute() で新しい属性を作成できます:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
newNode=xmlDoc.createElement("book");
x=xmlDoc.documentElement;
y=xmlDoc.getElementsByTagName("book");
document.write("Book elements before: " + y.length);
document.write("<br>");
x.insertBefore(newNode,y[3]);
y=xmlDoc.getElementsByTagName("book");
document.write("Book elements after: " + y.length);
</script>
</body>
</html>Run Instance»
[Run Instance] ボタンをクリックしてオンライン例を表示します
インスタンスの説明:
loadXMLDoc() を使用して "books.xml" を xmlDoc にロードします
最初の <book> 要素の "edition" 属性の値を "first" に設定 (作成) します
注:属性がすでに存在する場合、setAttribute() メソッドは既存の値を上書きします。
テキスト ノードにテキストを追加 - insertData()
insertData() メソッドは、既存のテキスト ノードにデータを挿入します。
insertData() メソッドには 2 つのパラメータがあります:
offset - 文字の挿入を開始する場所 (0 から始まります)
string - 挿入される文字列
次のコード スニペットは、「 Easyロードされた XML の最初の <title> 要素のテキスト ノードに「」が追加されます:
インスタンス
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");
x[0].setAttribute("edition","first");
document.write("Edition: ");
document.write(x[0].getAttribute("edition"));
</script>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
