DOM XML - Thêm nút

Trong chương này, chúng ta sẽ thảo luận về các nút của phần tử hiện có. Nó cung cấp một phương tiện để -

nối các nút con mới trước hoặc sau các nút con hiện có
chèn dữ liệu trong nút văn bản
thêm nút thuộc tính

Các phương pháp sau có thể được sử dụng để thêm / nối các nút vào một phần tử trong DOM -

appendChild()
insertBefore()
insertData()

appendChild ()

Phương thức appendChild () thêm nút con mới sau nút con hiện có.

Cú pháp

Cú pháp của phương thức appendChild () như sau:

Node appendChild(Node newChild) throws DOMException

Ở đâu,

newChild - Là nút để thêm
Phương thức này trả về Node được thêm vào.

Thí dụ

Ví dụ sau (appendchildnode_example.htm) phân tích cú pháp một tài liệu XML ( node.xml ) thành một đối tượng XML DOM và nối thêm PhoneNo con mới vào phần tử <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>

Trong ví dụ trên -

bằng phương thức createElement (), một phần tử mới PhoneNo được tạo.
Phần tử mới PhoneNo được thêm vào phần tử FirstName bằng phương thức appendChild ().

Chấp hành

Lưu tệp này dưới dạng appendchildnode_example.htm trên đường dẫn máy chủ (tệp này và node.xml phải nằm trên cùng một đường dẫn trong máy chủ của bạn). Trong đầu ra, chúng tôi nhận được giá trị thuộc tính là PhoneNo .

insertBefore ()

Phương thức insertBefore () , chèn các nút con mới trước các nút con được chỉ định.

Cú pháp

Cú pháp của phương thức insertBefore () như sau:

Node insertBefore(Node newChild, Node refChild) throws DOMException

Ở đâu,

newChild - Là nút để chèn
refChild - Là nút tham chiếu, tức là nút mà trước đó nút mới phải được chèn vào.
Phương thức này trả về Node đang được chèn.

Thí dụ

Ví dụ sau (insertnodebefore_example.htm) phân tích cú pháp tài liệu XML ( node.xml ) thành đối tượng DOM XML và chèn Email con mới trước phần tử được chỉ định <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>

Trong ví dụ trên -

bằng phương thức createElement (), một phần tử mới Email được tạo.
Phần tử mới Email được thêm vào trước phần tử Email bằng phương thức insertBefore ().
y.length cho biết tổng số phần tử được thêm vào trước và sau phần tử mới.

Chấp hành

Lưu tệp này dưới dạng insertnodebefore_example.htm trên đường dẫn máy chủ (tệp này và node.xml phải nằm trên cùng một đường dẫn trong máy chủ của bạn). Chúng tôi sẽ nhận được kết quả sau:

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

insertData ()

Phương thức insertData (), chèn một chuỗi ở độ lệch đơn vị 16 bit được chỉ định.

Cú pháp

InsertData () có cú pháp sau:

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

Ở đâu,

offset - là độ lệch ký tự cần chèn.
arg - là từ khóa để chèn dữ liệu. Nó bao gồm hai tham số offset và chuỗi trong dấu ngoặc đơn được phân tách bằng dấu phẩy.

Thí dụ

Ví dụ sau (addtext_example.htm) phân tích cú pháp một tài liệu XML (" node.xml ") thành một đối tượng DOM XML và chèn dữ liệu mới MiddleName tại vị trí được chỉ định vào phần tử <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");- Ở đây, x giữ tên của tên con được chỉ định, tức là <Tên đầu tiên>. Sau đó, chúng tôi chèn vào nút văn bản này dữ liệu "MiddleName" bắt đầu từ vị trí 6.

Chấp hành

Lưu tệp này dưới dạng addtext_example.htm trên đường dẫn máy chủ (tệp này và node.xml phải nằm trên cùng một đường dẫn trong máy chủ của bạn). Chúng tôi sẽ nhận được những điều sau đây trong đầu ra -

Tanmay
TanmayMiddleName