<!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>
<!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>
