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

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

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, chi tiết như nào hãy cùng chúng tôi phân tích:

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

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ử

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

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 *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn