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

Trình soạn thảo - Phương thức replaceChild() nút văn bản trong JavaScript

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

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Phương thức replaceChild() nút văn bản trong JavaScript</title>
<style>
#divid{color:red}
</style>
</head>
<body>

<h1>Phương thức replaceChild() nút văn bản trong JavaScript</h1>
<p>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, ở ví dụ này mình 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:</p>

<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>
</body>
</html>