Phương pháp XML DOM appendChild()

Tài liệu tham khảo đối tượng Node

Định nghĩa và cách sử dụng

Phương pháp appendChild() có thể thêm một nút con mới vào cuối danh sách các nút con của một nút.

Phương pháp này có thể trả về nút con mới.

Cú pháp:

appendChild(newchild)
Tham số Mô tả
newchild Nút được thêm vào

Giá trị trả về

Nút được thêm vào.

Mô tả

Phương pháp này sẽ thêm nút newchild vào tài liệu, làm cho nó trở thành nút con cuối cùng của nút hiện tại.

Nếu newchild đã tồn tại trong cây tài liệu, nó sẽ bị xóa khỏi cây tài liệu và sau đó được chèn lại vào vị trí mới. Nếu newchild là nút DocumentFragment, nó sẽ không được chèn trực tiếp mà các nút con của nó sẽ được chèn theo thứ tự vào cuối mảng childNodes[] của nút hiện tại.

Lưu ý, các nút từ một tài liệu (hoặc được tạo bởi một tài liệu) không thể được chèn vào tài liệu khác. Nghĩa là, thuộc tính ownerDocument của newchild phải giống với thuộc tính ownerDocument của nút hiện tại.

Ví dụ

Dưới đây là hàm sẽ thêm một đoạn văn bản mới vào cuối của tài liệu:

function appendMessage (message) {
  var pElement = document.createElement("p");
  var messageNode = document.createTextNode(message);
  pElement.appendChild(messageNode);
  document.body.appendChild(pElement);
}

Mô hình

Trong tất cả các ví dụ, chúng ta sẽ sử dụng tệp XML books.xmlvà hàm JavaScript loadXMLDoc()

Dưới đây là đoạn mã có thể tạo và thêm một nút vào phần tử đầu tiên <book>, sau đó xuất tất cả các nút con của phần tử đầu tiên <book>:

xmlDoc=loadXMLDoc("books.xml");
var newel=xmlDoc.createElement('edition');
var newtext=xmlDoc.createTextNode('First');
newel.appendChild(newtext);
var x=xmlDoc.getElementsByTagName('book')[0];
x.appendChild(newel);;
var y=x.childNodes;
for (var i=0;i<y.length;i++)
  { 
  //Hiển thị chỉ các nút phần tử
  if (y[i].nodeType==1)
    { 
    document.write(y[i].nodeName);
    document.write("<br />");
    } 
  }

Kết quả xuất ra:

title
author
year
price
edition

Chú ý:Internet Explorer sẽ bỏ qua các nút văn bản trống giữa các nút (ví dụ: ký tự mũi tên xuống), trong khi Mozilla không làm như vậy. Do đó, trong ví dụ sau, chúng ta chỉ xử lý các nút phần tử (nút phần tử có nodeType=1).

Lưu ý:Nếu bạn cần thêm thông tin về sự khác biệt giữa XML DOM trên IE và Mozilla, hãy truy cập Trình duyệt DOM Chương.

Tài liệu tham khảo đối tượng Node