Phương thức replaceChild() trong JavaScript

• Bùi Tấn Lực
• 917
• 14/09/2025

Chức năng của Phương thức replaceChild() trong JavaScript

Phương thức replaceChild() trong JavaScript dùng để thay thế phần tử HTML hoặc thay thế nút văn bản trong phần tử HTML.

Cú pháp của Phương thức replaceChild() trong JavaScript

tenbiencha.replaceChild(phantumoi, phantuhientai);

tenbiencha: Tên biến cha là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy, phần tử HTML này chứa các phần tử con.

phantumoi: Phần tử hoặc nút văn bản mới.

phantuhientai: Phần tử hoặc nút con hiện tại cần thay bằng phần tử hoặc nút văn bản mới.

Code Phương thức replaceChild() trong JavaScript

Phương thức replaceChild() phần tử trong JavaScript

Tạo một phần tử HTML mới và thay thế vào vị trí của phần tử HTML con:

ulid.replaceChild(phantuli, ulid.children[0]);

<ul id="ulid">
    <li>Home</li>
    <li>Giới thiệu</li>
    <li>Hosting</li>
    <li>Blog</li>
    <li>Liên hệ</li>
</ul>
<p>Click vào nút THAY PHẦN TỬ để thay thế giá trị thẻ li ở vị trí 0</p>
<button onclick="thayPhanTu()">THAY PHẦN TỬ</button>
<script>
function thayPhanTu() {
 // Tạo phần tử li 
 const phantuli = document.createElement("li");
 // Tạo một node (nút) văn bản
 const nodevanban = document.createTextNode("Trang chủ");
 // Thêm nút văn bản vào phần tử li mới tạo
 phantuli.appendChild(nodevanban); 	
 // Lấy id ulid
 const ulid = document.getElementById("ulid");
 // Thay thế phần tử li mới tạo vào li đầu tiên
 ulid.replaceChild(phantuli, ulid.children[0]);
}
</script>

Chạy Thử

Phương thức replaceChild() nút văn bản trong JavaScript

Tạo nút văn bản mới và thay thay thế vào nút văn bản của một phần tử con:

<ul id="ulid">
    <li>Home</li>
    <li>Giới thiệu</li>
    <li>Hosting</li>
    <li>Blog</li>
    <li>Liên hệ</li>
</ul>
<p>Click vào nút THAY NÚT VĂN BẢN để thay thế giá trị thẻ li ở vị trí 0</p>
<button onclick="thayNutVanBan()">THAY NÚT VĂN BẢN</button>
<script>
function thayNutVanBan() {
 // Tạo một node (nút) văn bản
 const nodevanban = document.createTextNode("Trang chủ");
 // Lấy phần tử li ở vị trí 0
 const phantuli = document.getElementById("ulid").children[0];
 // Thay thế node văn bản mới tạo vào node li đầu tiên
 phantuli.replaceChild(nodevanban, phantuli.childNodes[0]);
}
</script>

Chạy Thử

Những điều cần lưu ý khi sử dụng replaceChild() trong JavaScript

Khi thao tác với DOM bằng replaceChild(), hiểu đúng mối quan hệ giữa phần tử cha, phần tử cũ và phần tử mới sẽ giúp tránh nhiều lỗi khi chương trình chạy. Ngoài cú pháp, một số đặc điểm của phương thức này cũng rất đáng chú ý khi áp dụng vào website thực tế.

Phần tử cần thay thế phải thuộc phần tử cha

Phương thức replaceChild() được gọi từ phần tử cha và chỉ có thể thay thế một node đang nằm trực tiếp bên trong phần tử đó. Node cần thay thế không thể là một phần tử nằm sâu hơn trong cấu trúc DOM nếu chưa xác định đúng phần tử cha của nó.

Chẳng hạn, nếu cần thay một phần tử có id là oldItem, trước tiên nên lấy phần tử cha chứa nó:

const parent = document.getElementById("container");
const oldItem = document.getElementById("oldItem");
const newItem = document.createElement("p");

newItem.textContent = "Nội dung mới";
parent.replaceChild(newItem, oldItem);

Nếu oldItem không phải node con trực tiếp của parent, thao tác có thể phát sinh lỗi. Vì vậy, khi không thay thế được phần tử như mong muốn, hãy kiểm tra lại cấu trúc DOM trước khi xử lý.

replaceChild() trả về phần tử bị thay thế

Một điểm hữu ích của replaceChild() là phương thức này trả về chính node vừa bị thay thế. Bạn có thể lưu lại giá trị này nếu cần kiểm tra, xử lý hoặc sử dụng nó cho một thao tác khác.

const parent = document.getElementById("container");
const oldItem = document.getElementById("oldItem");
const newItem = document.createElement("p");

newItem.textContent = "Nội dung mới";

const removedItem = parent.replaceChild(newItem, oldItem);

console.log(removedItem);

Điều này đặc biệt tiện khi chương trình cần biết phần tử nào vừa được đưa ra khỏi vị trí cũ thay vì chỉ thực hiện thay thế rồi bỏ qua kết quả.

Phân biệt replaceChild() với removeChild() và appendChild()

Ba phương thức đều dùng để thao tác với node trong DOM nhưng mục đích khác nhau. removeChild() loại bỏ một node khỏi phần tử cha, appendChild() thêm một node vào cuối danh sách node con, còn replaceChild() thay node cũ bằng node mới tại chính vị trí của node đó.

Phương thức	Mục đích
replaceChild()	Thay một node hiện có bằng node khác.
removeChild()	Loại bỏ một node khỏi phần tử cha.
appendChild()	Thêm một node vào cuối các node con.

Nếu muốn giữ nguyên vị trí của một phần tử nhưng thay nội dung hoặc loại node, replaceChild() thường phù hợp hơn việc xóa phần tử cũ rồi thêm phần tử mới. Ngược lại, khi chỉ cần loại bỏ một node hoặc bổ sung node mới, hai phương thức còn lại sẽ trực tiếp và dễ hiểu hơn.

Khi nào nên dùng replaceChild() trong thao tác DOM?

replaceChild() phù hợp khi giao diện cần chuyển một node hiện có sang một node khác mà vẫn muốn giữ nguyên vị trí của nó trong cây DOM. Ví dụ, một khu vực hiển thị trạng thái có thể được thay từ thông báo cũ sang thông báo mới, hoặc một phần tử có thể được đổi sang một loại node khác sau khi người dùng thực hiện một thao tác.

Tuy nhiên, nếu chỉ thay đổi nội dung văn bản hoặc HTML bên trong một phần tử, không nhất thiết phải thay cả node. Trong những trường hợp đó, các thuộc tính hoặc phương thức chuyên biệt cho nội dung có thể đơn giản và dễ kiểm soát hơn.

Vì vậy, nên dùng replaceChild() khi mục tiêu thực sự là thay thế một node bằng node khác. Xác định đúng nhu cầu ngay từ đầu sẽ giúp mã JavaScript rõ ràng hơn và hạn chế các thao tác DOM không cần thiết.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức replaceChild() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức replaceChild() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp