XML DOM - Tambahkan Node

Pada bab ini, kita akan membahas node ke elemen yang ada. Ini menyediakan sarana untuk -

menambahkan node anak baru sebelum atau setelah node anak yang ada
memasukkan data ke dalam node teks
tambahkan simpul atribut

Metode berikut dapat digunakan untuk menambahkan / menambahkan node ke elemen di DOM -

appendChild()
insertBefore()
insertData()

appendChild ()

Metode appendChild () menambahkan simpul anak baru setelah simpul anak yang ada.

Sintaksis

Sintaks metode appendChild () adalah sebagai berikut -

Node appendChild(Node newChild) throws DOMException

Dimana,

newChild - Apakah node untuk ditambahkan
Metode ini mengembalikan Node yang ditambahkan.

Contoh

Contoh berikut (appendchildnode_example.htm) mengurai dokumen XML ( node.xml ) menjadi objek XML DOM dan menambahkan PhoneNo anak baru ke elemen <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>

Dalam contoh di atas -

menggunakan metode createElement (), elemen baru PhoneNo dibuat.
Elemen baru PhoneNo ditambahkan ke elemen FirstName menggunakan metode appendChild ().

Eksekusi

Simpan file ini sebagai appendchildnode_example.htm di jalur server (file dan node.xml ini harus berada di jalur yang sama di server Anda). Pada output, kita mendapatkan nilai atribut sebagai PhoneNo .

insertBefore ()

Metode insertBefore () , menyisipkan node anak baru sebelum node anak yang ditentukan.

Sintaksis

Sintaks metode insertBefore () adalah sebagai berikut -

Node insertBefore(Node newChild, Node refChild) throws DOMException

Dimana,

newChild - Apakah node untuk disisipkan
refChild - Apakah node referensi, yaitu node sebelum node baru harus dimasukkan.
Metode ini mengembalikan Node yang sedang dimasukkan.

Contoh

Contoh berikut (insertnodebefore_example.htm) mengurai dokumen XML ( node.xml ) menjadi objek XML DOM dan menyisipkan Email anak baru sebelum elemen yang ditentukan <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>

Dalam contoh di atas -

menggunakan metode createElement (), elemen baru Email dibuat.
Elemen baru Email ditambahkan sebelum elemen Email menggunakan metode insertBefore ().
y.length memberikan jumlah total elemen yang ditambahkan sebelum dan sesudah elemen baru.

Eksekusi

Simpan file ini sebagai insertnodebefore_example.htm di jalur server (file dan node.xml ini harus berada di jalur yang sama di server Anda). Kami akan menerima output berikut -

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

insertData ()

Metode insertData (), menyisipkan string pada offset unit 16-bit yang ditentukan.

Sintaksis

InsertData () memiliki sintaks berikut -

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

Dimana,

offset - adalah offset karakter yang akan disisipkan.
arg - adalah kata kunci untuk memasukkan data. Ini membungkus dua parameter offset dan string dalam tanda kurung yang dipisahkan oleh koma.

Contoh

Contoh berikut (addtext_example.htm) mengurai dokumen XML (" node.xml ") menjadi objek XML DOM dan menyisipkan data baru MiddleName pada posisi yang ditentukan ke elemen <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");- Di sini, x menyimpan nama dari nama anak yang ditentukan, yaitu <FirstName>. Kami kemudian memasukkan ke node teks ini data "MiddleName" mulai dari posisi 6.

Eksekusi

Simpan file ini sebagai addtext_example.htm di jalur server (file dan node.xml ini harus berada di jalur yang sama di server Anda). Kami akan menerima yang berikut di output -

Tanmay
TanmayMiddleName