XML DOM - เพิ่มโหนด

ในบทนี้เราจะพูดถึงโหนดขององค์ประกอบที่มีอยู่ มันให้วิธีการ -

  • ผนวกโหนดลูกใหม่ก่อนหรือหลังโหนดลูกที่มีอยู่

  • แทรกข้อมูลภายในโหนดข้อความ

  • เพิ่มโหนดแอตทริบิวต์

สามารถใช้วิธีการต่อไปนี้เพื่อเพิ่ม / ผนวกโหนดเข้ากับองค์ประกอบใน 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ถูกเพิ่มเข้าไปในองค์ประกอบFirstNameโดยใช้เมธอด appendChild ()

การดำเนินการ

บันทึกไฟล์นี้เป็นappendchildnode_example.htmบนเส้นทางเซิร์ฟเวอร์ (ไฟล์นี้และ node.xml ควรอยู่บนเส้นทางเดียวกันในเซิร์ฟเวอร์ของคุณ) ในการส่งออกที่เราได้รับค่าแอตทริบิวต์เป็นPhoneNo

แทรกก่อน ()

เมธอดinsertBefore ()แทรกโหนดลูกใหม่ก่อนโหนดลูกที่ระบุ

ไวยากรณ์

ไวยากรณ์ของวิธีการ insertBefore () มีดังนี้ -

Node insertBefore(Node newChild, Node refChild) throws DOMException

ที่ไหน

  • newChild - เป็นโหนดที่จะแทรก

  • refChild - เป็นโหนดอ้างอิงกล่าวคือโหนดก่อนที่จะต้องแทรกโหนดใหม่

  • วิธีนี้ส่งคืนโหนดที่กำลังแทรก

ตัวอย่าง

ตัวอย่างต่อไปนี้ (insertnodebefore_example.htm) แยกวิเคราะห์เอกสาร XML ( node.xml ) ลงในอ็อบเจ็กต์ XML DOM และแทรกอีเมลลูกใหม่ก่อนองค์ประกอบที่ระบุ <Email>

<!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 () อีเมลองค์ประกอบใหม่จะถูกสร้างขึ้น

  • องค์ประกอบใหม่อีเมลถูกเพิ่มก่อนองค์ประกอบอีเมลโดยใช้เมธอด insertBefore ()

  • 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 - เป็นคำสำคัญในการแทรกข้อมูล มันใส่ค่าออฟเซ็ตและสตริงสองพารามิเตอร์ภายในวงเล็บคั่นด้วยลูกน้ำ

ตัวอย่าง

ตัวอย่างต่อไปนี้ (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> จากนั้นเราจะแทรกข้อมูล"MiddleName"ไปยังโหนดข้อความนี้โดยเริ่มจากตำแหน่งที่ 6

การดำเนินการ

บันทึกไฟล์นี้เป็นaddtext_example.htmบนเส้นทางเซิร์ฟเวอร์ (ไฟล์นี้และ node.xml ควรอยู่บนเส้นทางเดียวกันในเซิร์ฟเวอร์ของคุณ) เราจะได้รับสิ่งต่อไปนี้ในผลลัพธ์ -

Tanmay
TanmayMiddleName