Tài liệu lập trình PHP từ căn bản đến nâng cao from ZendVN

The DOMNode::replaceChild[] function is an inbuilt function in PHP which is used replace the old child node with the passed new node. Further, if the new node is already a child it will not be added the second time. If the replacement succeeds the old node is returned.

Syntax:

DOMNode DOMNode::replaceChild[ DOMNode $newnode, DOMNode $oldnode ]

Parameters: This function accept two parameters as mentioned above and described below:

• $newnode: It specifies the new node.
• $oldnode: It specifies the old node.

Return Value: This function returns old node or FALSE if an error occur.

Exceptions: This function throws DOM_NO_MODIFICATION_ALLOWED_ERR, if this node is read-only or if the previous parent of the node being inserted is read-only, DOM_HIERARCHY_REQUEST_ERR, if this node is of a type that does not allow children of the type of the $newnode node, or if the node to put in is one of this node’s ancestors or this node itself, DOM_WRONG_DOCUMENT_ERR, if $newnode was created from a different document than the one that created this node, DOM_NOT_FOUND, if $oldnode is not a child of this node.

Trong hướng dẫn tự học JavaScript này, bạn sẽ tìm hiểu cách thao tác thêm / Xóa các phần tử trong JavaScript. [Hay còn gọi là thao tác với DOM]

Cách thêm / Xóa phần tử thông qua JS DOM

Thao tác các phần tử DOM trong JavaScript

Bây giờ, qua 4 bài học trước bạn đã học cách chọn và định kiểu các thành phần HTML DOM, cách chọn đến phần tử DOM cũng như cách get / set thuộc tính cho nó.

Trong chương này, chúng ta sẽ tìm hiểu cách thêm hoặc loại bỏ các phần tử DOM một cách linh hoạt hoặc lấy nội dung của chúng.

Bởi vì khi lập trình web thực tế chúng ta sẽ thường xuyên cần tạo ra các bố cục động, khi thì thêm khối này, khi thì loại bỏ khối nọ.

> Nếu bạn muốn trở thành một lập trình viên phát triển website "XỊN SÒ" thì xem ngay KHÓA HỌC LẬP TRÌNH [Full Stack]

Hãy tiếp tục đọc bên dưới đây để biết cách làm thế nào nhé.

Thêm phần tử mới vào trong DOM

Bạn có thể tạo phần tử mới trong tài liệu HTML một cách dễ dàng thông qua phương thức document.createEuity[].

Phương thức này tạo ra một phần tử mới, nhưng nó không thêm ngay nó vào DOM.

Bạn sẽ phải tự thêm nó vào DOM bằng một bước riêng biệt, như trong ví dụ sau:

HTML:

    
Xin chào
    
Đây là ví dụ thao tác với DOM.

JavaScript:

Phương thức appendChild[] thêm phần tử mới vào cuối của bất kỳ phần tử con nào khác của nút cha được chỉ định.

Tuy nhiên, nếu bạn muốn thêm phần tử mới vào đầu của bất kỳ phần tử nào khác, bạn có thể sử dụng phương thức insertBefore[], như trong ví dụ dưới đây:

JavaScript:

Get và Set nội dung HTML trong DOM

Bạn cũng có thể dễ dàng lấy [get] hoặc thiết lập [set] nội dung của các thành phần HTML với thuộc tính innerHTML.

Thuộc tính này set hoặc get nội dung bên trong thẻ HTML [Bên trong thẻ mở và thẻ đóng của nó]

Hãy xem ví dụ sau để xem nó hoạt động như thế nào:

HTML:

    
Xin chào!
    
Đây là ví dụ thao tác với DOM.

JavaScript:

Như bạn có thể thấy, bạn có thể dễ dàng chèn các phần tử mới vào DOM bằng cách sử dụng thuộc tính innerHTML.

Nhưng có một vấn đề... thuộc tính innerHTML thay thế tất cả nội dung hiện có của một phần tử.

Vì vậy, nếu bạn muốn chèn HTML vào tài liệu mà không thay thế nội dung hiện có của một phần tử, bạn có thể sử dụng phương thức insertAdjacentHTML[].

Phương pháp này chấp nhận hai tham số:

    + Tham số đầu tiên: Vị trí cần chèn [nó phải là 

    + Tham số thứ hai: Văn bản HTML cần chèn.

Ví dụ sau đây sẽ minh họa cách phương thức trên hoạt động như thế nào:

HTML [Chú ý những chỗ chú thích, đó là vị trí cần chèn]:

    
    
Xin chào bro!
    

JavaScript:

Lưu ý: Vị trí beforebegin và afterend chỉ hoạt động nếu node nằm trong cây DOM và có phần tử cha. Ngoài ra, khi chèn HTML vào một trang, hãy cẩn thận không sử dụng đầu vào của người dùng chưa được kiểm tra, để tránh các cuộc tấn công XSS.

Loại bỏ các phần tử hiện có khỏi DOM

Tương tự, bạn có thể sử dụng phương thức removeChild[] để xóa một node con khỏi DOM.

Phương thức này cũng trả về node bị loại bỏ. Đây là một ví dụ:

HTML:

    
Xin chào!
    
Ví dụ loại bỏ phần tử khỏi DOM.

JavaScript:

Bạn cũng có thể loại bỏ phần tử con mà không biết chính xác phần tử cha.

Chỉ cần tìm phần tử con và sử dụng thuộc tính parentNode để tìm phần tử cha của nó.

Thuộc tính này trả về cha của node được chỉ định trong cây DOM. Đây là một ví dụ:

HTML:

    
Xin chào!
    
Ví dụ loại bỏ phần tử khỏi DOM.

JavaScript:

Thay thế các phần tử hiện có trong DOM

Bạn cũng có thể thay thế một phần tử trong HTML DOM bằng một phần tử khác bằng phương thức replaceChild[].