XMLDOM-ノードの追加

この章では、既存の要素へのノードについて説明します。それは次の手段を提供します-

  • 既存の子ノードの前または後に新しい子ノードを追加します

  • テキストノード内にデータを挿入します

  • 属性ノードを追加

次の方法を使用して、DOM内の要素にノードを追加/追加できます-

  • appendChild()
  • insertBefore()
  • insertData()

appendChild()

メソッドappendChild()は、既存の子ノードの後に​​新しい子ノードを追加します。

構文

appendChild()メソッドの構文は次のとおりです-

Node appendChild(Node newChild) throws DOMException

どこ、

  • newChild-追加するノードです

  • このメソッドは、追加されたノードを返します。

次の例(appendchildnode_example.htm)は、XMLドキュメント(node.xml)をXML DOMオブジェクトに解析し、新しい子PhoneNoを要素<FirstName>に追加します。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         create_e = xmlDoc.createElement("PhoneNo");

         x = xmlDoc.getElementsByTagName("FirstName")[0];
         x.appendChild(create_e);

         document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
      </script>
   </body>
</html>

上記の例では-

  • createElement()メソッドを使用して、新しい要素PhoneNoが作成されます。

  • 新しい要素PhoneNoは、メソッドappendChild()を使用して要素FirstNameに追加されます。

実行

このファイルをappendchildnode_example.htmとしてサーバーパスに保存します(このファイルとnode.xmlはサーバー内の同じパスにある必要があります)。出力では、属性値をPhoneNoとして取得します。

insertBefore()

メソッドinsertBefore()は、指定された子ノードの前に新しい子ノードを挿入します。

構文

insertBefore()メソッドの構文は次のとおりです-

Node insertBefore(Node newChild, Node refChild) throws DOMException

どこ、

  • newChild-挿入するノードです

  • refChild-参照ノード、つまり、新しいノードを挿入する前のノードです。

  • このメソッドは、挿入されているノードを返します。

次の例(insertnodebefore_example.htm)は、XMLドキュメント(node.xml)をXML DOMオブジェクトに解析し、指定された要素<Email>の前に新しい子Eメールを挿入します。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         create_e = xmlDoc.createElement("Email");

         x = xmlDoc.documentElement;
         y = xmlDoc.getElementsByTagName("Email");

         document.write("No of Email elements before inserting was: " + y.length);
         document.write("<br>");
         x.insertBefore(create_e,y[3]);

         y=xmlDoc.getElementsByTagName("Email");
         document.write("No of Email elements after inserting is: " + y.length);
      </script>
   </body>
</html>

上記の例では-

  • メソッドcreateElement()を使用して、新しい要素Emailが作成されます。

  • 新しい要素Emailは、メソッドinsertBefore()を使用して、要素Emailの前に追加されます。

  • y.lengthは、新しい要素の前後に追加された要素の総数を示します。

実行

このファイルをサーバーパスにinsertnodebefore_example.htmとして保存します(このファイルとnode.xmlはサーバー内の同じパスにある必要があります)。次の出力を受け取ります-

No of Email elements before inserting was: 3
No of Email elements after inserting is: 4

insertData()

メソッドinsertData()は、指定された16ビット単位オフセットに文字列を挿入します。

構文

insertData()の構文は次のとおりです-

void insertData(int offset, java.lang.String arg) throws DOMException

どこ、

  • offset −は、挿入する文字オフセットです。

  • arg −はデータを挿入するためのキーワードです。2つのパラメーターoffsetとstringを、コンマで区切られた括弧で囲みます。

次の例(addtext_example.htm)は、XMLドキュメント( " node.xml ")をXML DOMオブジェクトに解析し、指定された位置の新しいデータMiddleNameを要素<FirstName>に挿入します。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
     </script>
  </head>
  <body>
     <script>
        xmlDoc = loadXMLDoc("/dom/node.xml");

        x = xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0];
        document.write(x.nodeValue);
        x.insertData(6,"MiddleName");
        document.write("<br>");
        document.write(x.nodeValue);

     </script>
   </body>
</html>
  • x.insertData(6,"MiddleName");−ここで、xは、指定された子名の名前、つまり<FirstName>を保持します。次に、このテキストノードに位置6から始まるデータ「MiddleName」を挿入します。

実行

このファイルをサーバーパスにaddtext_example.htmとして保存します(このファイルとnode.xmlはサーバー内の同じパスにある必要があります)。出力で以下を受け取ります-

Tanmay
TanmayMiddleName